Dive into Angular and start swimming …

(Part 2: swimming close to the coast or creating an small application in Angular)

If you want to create a web application, it doesn’t matter which technologies you will use, it will be rendered in a browser anyway. This means at the end your application will be rendered in html. Angular is one JavaScript development framework to create such web applications.

In part 1 of this blog series I gave you a short and explicit jump start in how to set up an Angular development environment based on node, npm and Visual Studio Code as an IDE.

I will show you in this blog, how to build a small Angular application with just a view steps. It will not be like a killer application at the end, but it will give you an overview in how creating web applications with this framework works.

The base will be the environment we set up in part 1.

As I wrote the base on each web application is html and I do not want to create all my html code from scratch –  I will also use a framework for this. For this exercise I will use Bootstrap, one of the most popular HTML and CSS frameworks for developing responsive web applications. I will not go deep in the framework; I will only use it to have the possibility to create nice looking example’s instead of wasting my time with creating html on my own.

That’s it for the introduction for now

Let’s start again!

Adding Bootstrap framework to my project

The project we build form the github is not having the actual bootstrap classes, so we have to add them to the application. We will do this again with npm like this.

Go to the project path like <path>/<to>/blogapp and install it with the following command:

sudo npm install bootstrap

After this you can open the global style.css file in you project. You can browse in the explorer view, but it is much easier to use the VS Code “Go to File” short cut: cmd-P

This will open an input field where you can easily type in the file name an open it.

Type in “style.css” and open it.

 

Now you can add the following on the top of this file:

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

 

To see if everything works fine together add a glyphicon from the bootstrap icon font to your page. You can do this by adding the icon to your component template:

Icon: <i class="glyphicon glyphicon-road"></i>

 

Now you can save the style.css, if you did not before and also the app.component.ts.
If it works together you will see the following in your browser:
(If you do not see the road icon, please check the steps before)

 

Is this Angular? Yes it is, but for now we are doing only preparations to start swimming.

Writing the first Angular code

To be honest, you did it already. In part one you added your last name to the AppComponent class and showed it in the html template. Ups yes right! 🙂
This was no rocket science, but at the end it is the way how to add values to your html. This is called Interpolation. You add the value of a variable to your template by using double-curly braces {{<expression>}}

Interpolation example:

template: `
     <h1>Hello {{name}} {{lastname}}</h1>
     `
export class AppComponent {
     name = 'Christoph';
     lastname = 'Muench';
}

Instead of using strings in your interpolation you can also use expressions.

Let’s have a look on that:

template: `
     <div>I was born in the year {{2016 -43}} </div>
     `

You can also call a method to get a parameter. Maybe you will get the age of a person from a service. To make it easy I will get it directly from a method of this class.

 

template: `
     <div>I was born in the year {{2016 – getAgeOfPerson() }} </div>
     `
export class AppComponent {
     ageOfPersion:number = 20;

     getAgeOfPerson(): number {
          return this.ageOfPerson;
     }
}

If you have everything together the result should look like this:

 

and the code of the app.component should be link be like:

 

Now you know what interpolations are and we can swim to where the water is a foot deeper.
What can we do now? To see how the code works you can change the age of the Person by hand in the code manually and see the effect.
Better solution will be, to have a button which will do this for us, right?
We start with the button. Instead of creating one I will use on from the bootstrap framework we installed before. You can go to bootstrap buttons and copy to code from there and add a button to your template.

<button type="button" class="btn btn-default">increase your age</button>

 

After this bind a simple click event to this button which is handled by method of your class.

 <button (click)=increaseAge() class="btn btn-default">button </button>

The class should handle the click event, increase the age by one and show it in the template.

increaseAge ():number {
     console.log (this.ageOfPerson);
     this.ageOfPerson++;
     return this.ageOfPerson;
}

This method logs the actual age to the console, increases the age of the person and returns it.

Save the app.component and see what happens.
That’s, let’s say, the magic of Angular. You have to do nothing in the template. The value is bind to the class variable and every change of it will be automatically visible in the page.
To make the code a bit cleaner I deleted the method, which returns the variable and added it in the template directly to the interpolation.
If you open the console of your developer tools in the browser, you can see how the method logs into it after each click on the button.

 

How deep you are in the water until now? I think the water is max under your knees and it is not possible to swim in Angular right now, but no one learned swimming in 10 minutes. So it is with Angular.

Property binding

In Angular it is also easy possible to change properties of an html tag by using property bindings. Lets do an example for class binding on the glyphicon.
First we will change the glyphicon to the glyphicon-user, to have a better icon font to the user. We will change the color to red if age is older then 25.
To do this we need some style classes. There for we will create them directly in our app.component, because we will not use them globaly.
You know, how to add a template inside the component. This is also possible for css styling.

styles: [`
   .gi-3x{font-size: 3em;}
   .icon-red{color: red;}
`]

 

As you see above styles will expected a string array of styles. We add the class icon-red and also a class to size the icon font a bit to figure out the effect easy.

We will use class properties in this section so we added a class property for icon-red. But it should be red only if the age is over 25. So we also need a condition.

[class.icon-red]="isRed == true"

The variable isRed has to be defined in our class and the we have to add an if-clause to check the age and set isRed to true if age is over 25.

This is easy right!

Create the variable with default false:

isRed: Boolean = false;

add the condition check to our click method:

if (this.ageOfPerson >= 25)
     this.isRed = true;

The complete code:

import { Component} from '@angular/core';

@Component({
     selector: 'my-app',
     template: `
          <h1>Hello {{name}} {{lastname}}</h1>
          Icon: <i [class.icon-red]="isRed == true" class="glyphicon glyphicon-user gi-3x"></i>
          <div>I was born in the year {{2016 - ageOfPerson}} and my age is {{ageOfPerson}}</div>
          <button (click)=increaseAge() class="btn btn-default">increase your age by year</button>
          `,
     styles: [`
          .gi-3x{font-size: 3em;}
          .icon-red{color: red;}
          `],
})

export class AppComponent {
     name = 'Christoph';
     lastname = 'Muench';
     ageOfPerson: number = 20;
     isRed: Boolean = false;

     increaseAge (): number {
          this.ageOfPerson++;
          if (this.ageOfPerson >= 25)
               this.isRed = true;
          console.log (this.ageOfPerson);
          return this.ageOfPerson;
     }
}

That is it for now. Are you curious about what’s coming next?