Angular 6 is now available !!

Angular 6 is now available !!

Angular Team has announced Angular 6with its new amazing features and lots of changes. Keep in mind that Angular v6 focuses more on the toolchain (and how to make it easier to move quickly with Angular) and less on the underlying framework. so I can’t wait to build amazing things usingAngular 6. My experiment was successful, and now I am glad to share with you my steps and results. Let’s start with Angular 6 cool features’ brief summary.

ng update

Running ng update <package> the CLI will analyze you package.json and update your packages. Updating an Angular application is just a command away.

ng add

It’s the same as ng update but it allows you to add and configure libraries. For example, if you want to install Angular Material you have to run:

ng add @angular/material

RxJS v6

 RxJS v6 brings a few major changes, along with a backward compatibility package rxjs-compat that will keep your applications working. It’s more tree-shakable now, ensuring that only the pieces of RxJS that you use are included in your production bundles.

angular-cli.json now renamed to angular.json with a new structure. You can check the other changes here in the official announcement

Upgrading

Angular Team created a great tool to upgrade you old angular app Angular Update Guide. use it to migrate your angular apps.

Once you choose your current app version and the complexity of your app. It’ll show you the steps you need to upgrade your app.
I won’t repeat their steps just follow them and watch the step that named Before updating as it must be made correctly.

Long Term Support (LTS)

The Angular team previously announced that only v4 and v6 would be LTS releases but the good news is that long-term support has been extended to ALL major releases starting with v4. Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bugfixes and security patches.

Let the fun begins with Angular 6. I assume that you havenodejs and npm installed. If not you have to install them first.

Step 1. Getting started with Angular 6

As the most of us — I am a lazy person, so really felt in love with such powerful helper tool — Angular CLI. It’s a magic wand of your project, so don’t be scared of it. The installation is as easy, as everynpm module. (My current npm version is 5.5.1,node is 9.2.0).

npm i -g @angular/cli

Time to generate a new project. Choose a nice, recognizable name for it. Following my instructions, you are going to create an app, that generates a new cute photo of a cat every time you visit it. Let it be CatApp. ?

ng new CatApp

It can take a couple of minutes to set up a new project.

Good news. We do not need any local web server for deployment. Just run in your terminal:

cd CatApp
ng serve

Last command will open a new tab in your browser (make sure that it’s Chrome!) on the http://localhost:4200/, serving your application with some default content. If everything is ok, you will see default starter template. To change the visible name of our application, let’s go to the app.component.ts file and change its title property:

Step 2. Integrating theme

We don’t want to be distracted by any styling, so material.angular.io is our salvation. Let’s install it through the terminal:

npm install --save @angular/material @angular/cdk

Choose one of pre-built themes for our app. Import it in styles.css file

Also we can add normalize.css module to prettify default HTML styling. In terminal you can type below command:

npm install --save normalize.css

Let’s import into styles.css

Now we can add material designed modules to our app. To begin with, let’s import the toolbar component. Open the app.module.ts file. You need to add only two lines of code:

Don’t forget to include MatToolBarModule to ngModule decorator. Now we can use toolbar in any place of our app. Go to the app.component.html, and remove all generated content with following lines:

By setting the color of element to be ‘primary’ we make it use the main theme color. If everything was done correctly, our app will show us a pretty enough header:

Step 3. Our first Angular component

We need to add and image card element to our app, where cute cats will be generated. Let it be the separate component, and nothing can be so easy, as generating components in Angular.

ng generate component dashboard

As a result you can see that angular has generated a new folder for you with all necessary files. Also take a look at app.module.ts. A new component has been imported automatically.

To use new component in application just put it’s selector in the necessary place.

As described earlier I have added MatCardModule, MatButtonModule in app.module.ts. for material ui for this CatApp.

As a source for cat images we will use awesome free service called cataas.com, which api is quite straightforward.

Also, it would be nice to have some ‘Refresh’ button to get new cat pictures if we want to.

Time to write some code

Let’s make the image source dynamic. Go to the dashboard.component.ts and create a new class called something like CatImage.

Now we can add a private property image of type CatImage for ImgCardComponent. The property src should be public and of type string. Take a look on the way we use that properties in the ngOnInit method:

To make our button alive we should create a new function (public method), that will make some magic for us. I called mine generateSrc:

Keyword void shows that our function has nothing to return. Size is one of the image options provided by cataas.com api.

Time to make some changes in img-card markup. Replace long hard-coded source url with component property {{ src }}. To add event listener to the card button, use (click) attribute.

Unfortunately, the image is not updating when we click on our Generate button, because actually the value of src stays unchanged. Let’s fix that by adding a fake query param with a timestamp in it.

Let’s add some custom style.

we will finally get our working app.

 

You can cheeckout this code on Github. Here’s my Repo.



Leave a Reply