Angular

Página 1

@Input

To capture data from parent component to child component.

parent-component.ts

import { Component } from '@angular/core'

@Component({

selector: 'my-app',

template: `

<child-comp [parentCount]="count"></child-comp>`

})

export class App {

count: number = 10;

}

child-component.ts

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

@Component({

selector: 'child-comp',

template: `

<div>

{{ parentCount }}

</div>`

})

export class ChildComponent {

@Input() parentCount: number; or @Input(‘parentCount‘) count: number //aliasing name 'count'

}

@Output and Event Emitter

@Output is not just a single thing that can pass data back from child to parent.

We have to use EventEmitter to emit the event to the parent so that parent can capture the exposed event and retrieve data.

child-component.ts

//import Output, EventEmitter from angular core

import {Component, Input, Output, EventEmitter} from '@angular/core'

//define the event emitter

@Output() change: EventEmitter<number> = new EventEmitter<number>();

//emit the event with the above change event

this.change.emit(11); //11 will be emitted to the parent

parent-component.ts

import {Component} from '@angular/core'

//import the child component

import {ChildComponent} from 'src/child.component'

//add (change) event to the child component selector.

//(change) is the name of the event that is emitted from the child component

@Component({

selector: 'parent',

template: `

<child-comp [parentCount]="count" (change)="updateFromChild($event)"> //$event will have content

</child-comp>`

});

export class ParentComponent {

count: number = 0; //initial value of count

//This is the event that we subscribe to the child's selector

//We will receive the data from child in this function

updateFromChild(event){

this.count++;

}

}

Passing Data Using Service

Service.ts import { Injectable } from '@angular/core';

@Injectable()

export class UrlHistoryService {

private urlHistory: string;

constructor() {

this.urlHistory = "";

}

public setUrlHistoryObj(val: string): void {

this.urlHistory = val;

}

public getUrlHistoryObj(): string {

return this.urlHistory;

} }

component-1.ts

export class SearchMovieListProducerComponent {

constructor(

private urlHistoryService: UrlHistoryService) {

this.urlHistoryService.setUrlHistoryObj("/movie/searchMovie");

}

} component-2.ts

export class SearchMovieListConsumerComponent {

backUrl: string;

constructor(

private urlHistoryService: UrlHistoryService) {

this.backUrl = this.urlHistoryService.getUrlHistoryObj();

}

}

Template Reference Variable

There are 2 ways to pass data from Child Component to Parent Component 1. Output Properties 2. Template Reference Variable With Output properties there are several moving parts.

In the child component we need to create a custom event. Raise the custom event. From the parent component bind to the child component event and handle it.

With the template reference variable approach, we do not have so many moving parts. We just declare a template reference variable and use it to call the child component public properties and methods.

ParentComponent.html

<h1 #h1Variable></h1>

<div *ngFor="let employee of employees">

<div (click)="h1Variable.innerHTML = childComponent.getNameAndGender()">

<div (click)="h1Variable.innerHTML = childComponent.employee.name + ' ' + childComponent.employee.gender">

<app-employee-display [employee]="employee" #childComponent>

</app-employee-display>

</div>

</div>

Code Explanation :

#childComponent is the template reference variable to the child component. Using this template variable we can call child component public property (employee) and method (getNameAndGender())

<div (click)="handleClick(childComponent.getNameAndGender())">. Using the template reference variable we are calling the child component method getNameAndGender(). The value this method returns is assigned to the innerHTML property of the <h1> element. #h1Variable is the template reference variable for <h1> element.

At this point when you click on an employee panel, you will see that employee's name and gender displayed by the <h1> element.

Inside of your component (option1):

import { ..., ViewChild, ... } from '@angular/core';

// ...

export class ParentComponent {

@ViewChild('yourChild') child;

ngAfterViewInit() {

console.log('only after THIS EVENT "child" is usable!!');

this.child.hide();

}

}

Inside of your component (option2):

import { ..., ViewChild, ... } from '@angular/core';

import { ..., ChildComponent, ... } from '....';

// ...

export class ParentComponent {

@ViewChild(ChildComponent) child;

ngAfterViewInit() {

console.log('only after THIS EVENT "child" is usable!!');

this.child.hide();

}

}

Calling a parent function from the child component

This is a case it's up to your use case as you can inject the parent component in the child component and do the same as above but the relation is no longer be parent-child or child-parent but both components will be strongly linked together which is a rare use case.

Alternatively, you can get the same result in a very simple way by using the @Outputdecorator to pass data and create your function in your child that will consume the data passed in.

so In your child component, you do the following:

@Output() childEvent = new EventEmitter();

test(){

this.childEvent.emit('this is a test');

}

In your parent template

<child-component (childEvent)="test($event)"></child-component>

and then in your component,

test(msg){

console.log(msg);

}

Página 2

Data Bound Properties

When you have a component

@Component({

selector: 'my-component'

})

class MyComponent {

@Input() name:string;

ngOnChanges(changes) {

}

ngOnInit() {

}

}

you can use it like

<my-component [name]="somePropInParent"></my-component>

This make name a data-bound property.

When the value of somePropInParent was changed, Angulars change detection updates name and calls ngOnChanges().

Página 3

Angular Forms

Template Driven Forms

With a template driven form, most of the work is done in the template; and with the model driven form, most of the work is done in the component class.

Code

import { FormsModule } from '@angular/forms';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective

],

imports: [

BrowserModule,

HttpModule,

FormsModule,

RouterModule.forRoot([{

path: 'new-cmp',

component: NewCmpComponent

}])

],

providers: [MyserviceService],

bootstrap: [AppComponent]

})