Angular – Displaying data and handle events

1. Property Binding

Property Binding is to bind the DOM elements’ properties to our components, for example

import { Component } from "@angular/core";
import { courseService } from "./courses.service";

@Component({
    selector: 'courses',
    template:  `
    <h2 textConetent = "{{ title }}"><h2>
    <h1 [textContent] = 'title'></h1>
    `
})
export class coursesComponent{
    title = 'list of courses';
}

These are two ways to implement property binding

  1. using “{{}}”, you do not need put anything around the property, just put the filed or method in the component into the “{{}}”(interpolation)
  2. using “[]”, “[]” is around the name of the property of DOM elements. if you choose this way, you do not need to put anything around the name of fields or methods in the components.

Either way work well, however, the interpolation way seems to be more concise.

2. Attributes Binding

In most cases, the DOM attributes have one to one relationships with HTML properties. However, there are some rare cases exist. When we using “[]”, we are actually binding properties, which means we cannot access to the attr if the attr does not have a counterpart property in HTML. However, we can use “attr.xxx” to handle this problem.

What is the difference between properties and attributes in HTML?

import { Component } from "@angular/core";
import { courseService } from "./courses.service";

@Component({
    selector: 'courses',
    template:  `
    <table>
        <tr>
            <td [attr.colspan] = "colSpan"></td>
        </tr>
    </table>
    `
})
export class coursesComponent{
    title = 'list of courses';
    colSpan = 2; 
}

3. Bootstrap

sudo npm install bootsrap --save

“npm” is going to download bootstrap into “node.js” folder. And –save is going to add bootstrap into “package.json”

When people download your project, for example, from GitHub, they just simply type in

npm install

all the dependency will be installed by “npm” automatically

Now, we already have bootstrap in our files

@import "~bootstrap/dist/css/bootstrap.css";

Put this into the style.css file.

How can you get the path? Just check the folder called npm_module.

And let s try to use bootstrap in our component:

import { Component } from "@angular/core";
import { courseService } from "./courses.service";

@Component({
    selector: 'courses',
    template:  `
    <button class = "btn btn-primary">save</button>
    `
})
export class coursesComponent{
    title = 'list of courses';
}

A blue button should appear on the browser.

4. Class Binding

Sometimes we need to modify the class of our HTML elements, we use the following method

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <button class = "btn btn-primary" [class.active] = "isActive">save</button>
    `
})
export class coursesComponent{

    isActive = true;

}

Using the developer tool if the browser, you will see the button element becomes

<button class="btn btn-primary active">save</button>

5. Style Binding

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <button [style.backgroundColor] = "isActive ? 'green' : 'white'" class = "btn btn-primary" [class.active] = "isActive">save</button>
    `
})
export class coursesComponent{
    title = 'list of courses';
    isActive = true;

}

The style binding is pretty similar to the class binding. The code above simply just saying if isActive is true, the backgroundColor of the button is green, otherwise, it is white.

6. Event Binding

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <div (click)="onDivClick()">
        <button class = "btn btn-primary " (click) = "onClick($event)">save</button>
    </div>
    <p>{{ myEvent }}<p>
    `
})
export class coursesComponent{
    myEvent; 

    onDivClick(){
        console.log("div is hit")
    }

    onClick($event){
        this.myEvent = $event;
        console.log($event)
    }

}

so, if you hit the button, then there will be a line of words show up below the button, which means you successfully bind the button with the onClick event.

However, you will also find out that, in the console, there will be a line of words called div is hit, which means onDiveClick is also called. This is called bubbling. The lower level events called will activate higher level events to be called. Sometimes, we do not want this to happen, so we use $event.stopPropergation()

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <div (click)="onDivClick()">
        <button class = "btn btn-primary " (click) = "onClick($event)">save</button>
    </div>
    <p>{{ myEvent }}<p>
    `
})
export class coursesComponent{
    myEvent; 

    onDivClick(){
        console.log("div is hit")
    }

    onClick($event){
        this.myEvent = $event;
        $event.stopPropergation();
        console.log($event)
    }

}

7. Event filter

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <input (keyup.enter)= "onEnter()">
    `
})
export class coursesComponent{
    onEnter(){
        console.log("enter is hitten")
    }


}

8. Template Variables

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <input #email (keyup.enter)= "onEnter(email.value)">
    `
})
export class coursesComponent{
    onEnter(email){
        console.log(email);
    }

}

The variable after “#” is called template variable.

9. Two-Way Binding

import { Component } from "@angular/core";
import { courseService } from "./courses.service";
import { flatten } from "@angular/compiler";

@Component({
    selector: 'courses',
    template:  `
    <input [(ngModel)] = "email" (keyup.enter)= "onEnter()">
    `
})
export class coursesComponent{
    email="me@domain.org";
    onEnter(){
        console.log(this.email);
    }

}

Using “[()]”

do not forget to import in app.module.js

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms'; // import this
 
import { AppComponent } from './app.component';
import { coursesComponent } from './courses.component';
import { TestComponent } from './test/test.component';
import { courseService } from './courses.service';

@NgModule({
  declarations: [
    AppComponent,
    coursesComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // add this here
  ],
  providers: [courseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

10. Pipes

https://angular.io/guide/pipes

 

Leave a Reply

Your email address will not be published. Required fields are marked *