Angular Continued…..

So in my last blog I spoke about how to install and set up a new angular application. I went ahead and built a small angular application so that I could learn a bit more about how to use Angular and maneuver the components. Here is a preview of what I built with angular 8.

This is a look at the component that the Angular CLI generates for me. When you open /src/app/app.component.ts, you will see this image.

As you see there is a single import at the top which is necessary for all Angular components. There is also the @Component({}) decorator and the component logic at the bottom with the single title property. As I continue programming I will be using the 3 components above to build out the app.

Creating the Navigation

So here I went to the /src/app/app.component.html and removed all of the current code. I replaced it with the following.

The two important areas that are specific to Angular 8 are:

1. routerLink — This is how you link together different pages of the application. You do not use href.
2. router-outlet — This is where the routed components are displayed within the template. You will see how I used this shortly..

Next I opened the global /app/styles.scss file to write the following code.

So not anything too crazy. After saving the application, I now have a styled navigation bar.

Routing

Now I used the Angular CLI to generate a couple components for the pages of the application. In your terminal write the following commands:

ng generate component home
ng generate component list

This will now generate several files for each component. I then visited /src/app/app-routing.module.ts and added the following code:

First I import the components that I generated, and then I added them as an object in the Routes array. I left the path property blank, which signifies the home component will load by default when the app loads. If you click on the List and Home links in the navigation, it will now display the component template associated with the clicked component! Hooray!

One way data binding

When you want to communicate data from the component logic to the template(or vice versa), this is called one-way data binding. Now I opened up the /src/app/home/home.component.html file and replaced it with the following:

So there is a few things happening here:

• (click) This is a click event, which means that if the element is clicked, it will call the function counterClick() which doesn’t exist yet.
• {{clickCounter}} this is interpolation. clickCounter is a property(not yet defined) that will display data that is retrieved from the component.

Next I visited home.component.ts file and added the following code:

I defined the property (with TypeScript) and I have set it to 0. Next, I created the function which will increment the clickCounter property by 1. But before I give it a shot, I gave this some style. I visited home.component.scss file and added this code:

I saved all of the files that I just modified and then gave it a shot! First, the template is retrieving the clickCounter property from the component. Then, if I click on the span element, it is communicating data from the template to the component!

Two way data binding

The way I demonstrated the concept of data binding is I used a form element. I visited home.component.html and added the following code:

In order for the ngModel to work correctly, I needed to import it into my /src/app/app.module.ts:

Next, I defined the name property in the home.component.ts file:

I then saved that and now when I begin to type within the textfield, I now see that it displays in the line beneath it in real time. This is two-way data binding because it’s both setting and retrieving the property to and from the component/template!

ng-template

Well what about working with if and else within your templates? I used ng-template for that. I added the following code at the end of home.component.html:

First, I used the property binding [ngIf] and bind it to an expression clickCounter > 4. If that expression isn’t true, it will call upon a template called none with ngIfElse. If that expression is true, it will show the HTML within the initial ng-template block. If not, it shows the template defined by #none beneath it! Now I can give it a shot by clicking span element until it reaches 5 or more and I now saw that it worked in action.

Style Binding

So I then wanted to modify the appearance of the UI based on events that occur in the application. This is where class and style binding come into play. I modified the last play-container class in my HTML like so:

<div class="play-container" [style.background-color]="clickCounter > 4 ? 'yellow' : 'lightgray'">

With the inline style binding, I wrapped it in brackets(property binding) and specify style and then the name of the CSS property. I bind them to an expression (using clickCounter > 4 or this could be a boolean value too) and then a ternary operator ? where the first value is used if it’s true, and the second value after the colon is used for false.

When I saved it, initially the play container block will be light gray. When i click on the span button a few times, it will turn yellow. If I wanted to specify multiple CSS properties? Well I would modify the code like this:

Now when I tried it out, the CSS properties changed.

Class Binding

I Wanted to add or remove entire classes, that are defined in my CSS, I can do this with class binding. I modified the current .play-container I have been working with, to the following code.

<div class="play-container" [class.active]="clickCounter > 4">

I then visited home.component.scss and added this code:

.active {
    background-color: yellow;
    border: 4px solid black;
}

Now when I tried this out! It now works! I can also set multiple classes with ngClass. I modified the template as shown below:

<div class="play-container" [ngClass]="setClasses()">

Now I visited the component file and add the following:

setClasses() {
    let myClasses = {
      active: this.clickCounter > 4,
      notactive: this.clickCounter <= 4
    };
    return myClasses;
  }

I added the notactive class here, so I defined in in the component CSS file as well:

.notactive {
    background-color: lightgray;
}

Now when I try it out! It works!

Services

Services are special components that are reusable throughout the application. I created a service for the purpose of communicating with an API to fetch some data and display it on my lists page. I generated the service with the Angular CLI:

ng g s http

The “g s”, are shorthand terms for “generate service”. The name I am giving the service is “http”. I now visited the new service file located at /src/app/http.service.ts:

It looks similar to a component, except the import is an Injectable instead of a Component, and the decator is based on this @ Injectable. I then created a custom method that other components can access:

Now next in the /src/list/list.component.ts:

ngOnInit() is a lifecycle hook that is fired when the component loads So it is saying run the .method() from the service when the component loads. Now when I click the list link in the navigation and viewed the console in the web developer tools, I now saw “Hey, what is up!” outputted.

Angular HTTP Client

I need to integrate the HTTP client within the http service, which will allow me to communicate with a public API. Now I visited the http.service.ts and added the following:

First, I imported the HttpClient, then I created an instance of it through the dependency injection, and then created a method that returns the response from the API. I now have to import the HttpClientModule in the /src/app/app.module.ts file.

Now, I opened up the list.component.ts file and added the following code:

The service returns an observable, which means I can subscribe to it within the component. In the return, I can pass the data to my brews object. Next, I visited the list template file and added the following:

First, I added an *ngIf to only show the UL element if brews exists. Then, I can iterate through the array of objects with *ngFor. After that, it’s a simple matter of iterating through the results with interpolation! I styled this with CSS real quickly in this component’s.scss file:

Here is the result!

Closing

I just scratched the surface here but I learned a-lot. I am definitely going to continue and try to create an app using everything I have learned here before proceeding with more of the intermediate to advance topics. I really want to commit to the fundamental stuff to memory through repetition.

Enjoy!

Resources

Check out this tutorial by DesignCourse to build out this application using Angular 8.