Angular for beginners

In Solid Gear, we like to learn and to be at the cutting edge of technology.  Therefore, the company offers us the opportunity to spend some days digging in the technology we like.

I decided to study Angular and in this post I tell you about some of the things I have learned.

But, what is the name of framework?

The first thing that got my attention what the mess about the name. For experts, maybe there is not.

The first version of the framework was called Angular 1. Besides it is also known as AngularJS.

The framework was donbe from scratch for the second version. And it is the version the one known as Angular. Then Angular 4, 5, 6, are version of Angular 2.

When should we use Angular?

Angular is useful to create Single Page Applications (SPA).

In this kind of pages, all the code needed is downloaded and after that, the code is shown and hidden using javaScript. There is not more request to the server when you navigate as in the classical web pages.

What I have learned?

The basic concepts we should know about Angular are components, directives and models.

In this post, We are going to talk about components and the way they communicate with each other.

Components

Components has a HTML template, a typescript file and an options CSS file.

These allow Angular to isolate the logic and the style. Besides, it gives the chance of make the component reusable.

For example:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

This is the way to add the component in the HTML template of another component:

<app-first></app-first>

We can called the first component as a child component and the other one parent component.

Databinding

There are different ways of communication within a component.

The differents ways of broadcasting the information between javaScript and the template are:

• string interpolation

  The variable is declared in the .ts file:
  

  export class FirstComponent {
     elementId: number = 10;
  }

  It will be shown in the screen, writing this code in the HTML template:

  {{elementId}}

• Property binding: [property]=”data”.

  This is the way to set a value to a property through a javaScript variable called isDisabled and declare in the .ts file of the component.

  <button class="btn btn-primary" [disabled]=”isDisabled”>Add Server</button>

• Event binding: (event)=”expression”

  In the HTML template of the component, we can add this code:

  <button (click)=”onAddNewElement()”></button>

  Then,  in the .ts file, this one:

  onAddNewElement(){
  	
  }

  This way, when you clicked in the button, the function is called.
  

• two-way-binding: [(ngModel)]=”data”

  Property binding y event binding are combined, for that reason it is used curly brackets and brackets.
  

   <input type="text"  class="form-control"  [(ngModel)]="elementName">

  When the input event is raised, the value is update in our component automatically. Besides, as it is two-way-binding the value of the input will be update if we modified it in other places.

Communication between components

• Binding to custom property.

  In this section, we are going to see the way the parent component communicate with the child.
  

  By default, the properties of a component are only accessible within the component. We have the variable elementName, declare in the ts. file of the child component:
  

  elementName: {type: string, name: string, content: string}

  For this reason, if we want to allow the parent component to access to the this property, we will need to add a decorator (and import the module).
  

  @Input() elementName: {type: string, name: string, content: string}

  In the HTML template of the parent component, we can add this code:
  

  <app-first *ngFor=”let element of elementList” [elementName]=”element”></app-first>

  However, if we would not want to use the same name, we could do it this way:
  

  @Input(‘otherElementName’) elementName: {type: string, name: string, content: string}

  And in the parent component:

  <app-first *ngFor=”let element of elementList” [otherElementName]=”element”></app-first>

• Binding to custom events

  In this other section, we are going to see the way the child component communicate with the parent.

  For instance, when we create a new element in the child component and we want to send the parent the name of this new element.
  

  In the template of the child component, we have this piece of code:

  <button (click)=”onAddNewElement()”></button>

  To communicate with the father, we need to create in the .ts file of the child component a new event to broadcast this information.

  We need to create a property, called for instance elementCreated. The type of this variable is EventEmitter and we need to indicate the params that are going to be emitted.

  Beside we have to add the decorator Output. In this way, the event we will be listened from outside.
  

  @Output() elementCreated = new EventEmitter<string>();

  When clicking in the button to create a new element, the function onAddNewElement is called. This is the one is going to emit the event:
  

  onAddNewElement() {
  	this.elementCreated.emit(this.newElementName);
  }

  Then in the HTML template of the parent component, we add the code to listen to this event:
  

  <app-first (elementCreated)=”onElementAdded($event)”</app-first>

  Therefore, in the .ts file of the parent component, the function onElementAdded is created.
  

  onElementAdded(elementName: string){
  
  }

What is the concept that call your attention the most when you started to learn Angular?