by Marcos.Cereijo | In a previous post we took a brief overview about Angular and its evolution. Now it's time to go a bit deeper. We are going to talk about how a component is able to display the value of its properties in the template and, the other way around, how a template can inform about events and input values to the component. We are also going to see how to modify the DOM structure based on the component state. Finally, we are going to get a glimpse about how to import and use SippoJS in an Angular application. For explaining these topics we will assume that we have developed a component called Hero. For using this component, we only have to add the hero tag to an HTML template. For example:

<div>Below I will get a instance of the HeroComponent</div>
<hero></hero>

The following excerpt represents the file hero.component.ts in which we defined the HeroComponent:

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

@Component({
  selector: 'hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent {
  myHero: string = 'Superman';
  myHeroImage: string = 'img/superman.png';
  Heroes: string[] = ['Superman', 'Batman', 'Wonder Woman', 'Hulk'];
  myClickHero() {
      console.log('My hero is ' + this.myHero);
  }
}

One important thing about the previous code is that we pass a lot of interesting metadata to the component through the @Component() decorator:

• selector: Defines the tag name that we will use to get an instance of this component.
• templateUrl: Represents the path to the HTML template that this component will use.
• styleUrls: It's an array with stylesheets that we will use for this component.

Now we are going to see how to write a hero.component.html file which will be able to communicate with the component. Data Binding Through data binding we can get variables values from our component and display these values in the template. We also can do it the other way around. Get information and events from the template to the component.

• Interpolation: This allow us to display component properties inside our templates. In this case, the <p> node will have inside the value of the variable between the double curly braces.

  <p> {{ myHero }} </p>
  

• Property binding: We can attach a variable value to a HTML DOM property. In this case we do so to the image src property. We need to know that we aren’t talking about HTML attributes. Some properties have the same name that an attribute, but the are cases that they haven't an attribute equivalent or their behavior can differ. This is the case of the disabled attribute and property. The only presence of the disabled attribute will produce a property disabled=true. The value of this attribute doesn't matter for the browser. In the following example we will assign the myHeroImage value to the src property.

  <img [src]='myHeroImage'>
  

• Event binding: This allow us to run code in the component just by triggering an event. For example through a click on a button. We also can define our own events using the directive EventEmitter.

  <button (click)='myClickHero()'>Click Here!!!</button>
  

• Two way data binding: This binding type is the most useful, due to it works in both directions. If we modify the value in the template, it will be modified in the component and if we modify the value in the component, it will be changed in the template.

  <input [(ngModel)]='myHero'>
  

Structural Directives These are directives which modify the DOM structures. This allow us to add or remove HTML elements dynamically.

• Directive *ngFor: If we need to create several nodes of the same type, we can use this directive. In this example we create a <li> node for each element inside the heroes array.

  <ul>
      <li *ngFor='let hero in heroes'>{{ hero }}</li>
  </ul>
  

• Directive *ngIf: This directive enables or disables a section just depending on a condition. This is very efficient because we aren’t hiding or displaying the element. This help us to save memory, because we are adding and removing them from the DOM on demand.

  <div *ngIf='heroes.lenght > 3'>Too many Heroes</div>
  

Angular has some more structural directives such as *ngSwitchCase and *ngSwitchDefault that work in a similar way that these two.   SippoJS and Angular For using SippoJS we just have to add the package name and version to our package.json and import it in our source files. Once we have done this, we will be able to use SippoJS in the same way that before, but taking advantage of all the TypeScript features. In the following example we can see and excerpt of an Angular authentication service using SippoJS:

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

import * as Sippo from "@quobis/sippojs";

@Injectable()
export class AuthService {

  authenticated: boolean = false;

  login(username: string, password: string): Promise {

    let sessionConfig = {
      wacUri: this.config.wacUri,
      mediatypes: {
        audio: true,
        video: true
      }
    }

    return Sippo.createSession(username, password, sessionConfig). then(
      session => {
        this.session = session;
        return session.connect().then( () => {
          this.authenticated = true;
          return session;
        });
      }
    );
  }

  . . .

}

  Conclusion Angular can help us to build high modular applications and to separate the logic from the template and style. We didn't talk about it, but in our projects we should use the testing capabilities that will help us to guarantee that changes in our code won’t affect features that were working before. Starting to use Angular isn’t easy, but once we start, we will notice that the quality of our code and our coding speed, improve. I hope that this Angular introduction could help you to understand what Angular is and how you can take advantage of all these features to build your high quality Sippo application. This is all for now, but in the next posts we will talk about some technologies that can help us to style our applications and build them for production. References [1] Angular: https://angular.io/docs