Formation Angular
Lab 2 More Components
Lab 2.1: Data Flowing Downwards
This component will pass data from the application to car components. This
will be example more-components-ex100:
1. Build the app using the CLI:
Use the following command:
ng new more-components-ex100 --inline-template --inline-style
2. Start ng serve:
Use the following code:
cd more-components-ex100
ng serve
3. Open app:
Open a web browser and navigate to localhost:4200. You should see
“welcome to app!”
4. Edit app class:
Edit app.component.ts and change it to the following:
import { Component } from '@angular/core';
import { ICar } from './icar';
@Component({
selector: 'app-root',
template: `
<car *ngFor="let car of cars" [theCar]="car"></car>
`,
styles: []
})
export class AppComponent {
cars:Array<ICar> = [
{make: 'bmw', model: 'm3'},
{make: 'porsche', model: '911'},
{make: 'bmw', model: 'm3'}
]; }
5.Create ICar interface:
Use the following command:
ng generate interface ICar
6.Edit ICar Interface:
Edit icar.ts and change it to the following:
export interface ICar {
make: string,
model: string
}
7.Create Car class:
Use the following code:
ng generate component Car --inline-template --inline-style --flat
8. Edit Car class:
Edit car.component.ts and change it to the following: import { Component,
Input } from '@angular/core';
import { ICar } from './icar';
@Component({
selector: 'car',
template: `
<p>
{{car.make}} : {{car.model}}
</p> `,
styles: [] })
export class CarComponent {
@Input('theCar') car: ICar;
}
Your app should be working at localhost:4200.
Note the following:
The Application component has a list of three cars. We use the ngFor
directive to iterate over the list of cars, generating a Car component for each
one. We use the theCar input property to pass the car to the Car component.
We have a Car component to display each car. In the Car component, we use
the theCar aliased input property to accept the car instance variable from the
outside.
Lab 2.2: Data Flowing Downwards
shows how events can flow upward from one component to another. This
will be example more-components-ex200:
1. Build the app using the CLI:
Use the following command:
ng new more-components-ex200 --inline-template --inline-style
2. Start ng serve:
Use the following code:
cd more-components-ex200
ng serve
3. Open app:
Open web browser and navigate to localhost:4200.
You should see “welcome to app!”
4. Edit app class:
Edit app.component.ts and change it to the following:
import { Component } from '@angular/core';
import { ICar } from './icar';
@Component({
selector: 'app-root',
template: `
<car *ngFor="let car of cars"
(carDelete)="deleteCar(car)" [theCar]="car">
</car>
`,
styles: []
})
export class AppComponent {
cars:Array<ICar> = [
{make: 'bmw', model: 'm3'},
{make: 'porsche', model: '911'},
{make: 'ford', model: 'mustang'}
];
deleteCar(car: ICar){
alert('Deleting car:' + JSON.stringify(car));
}}
5. Create ICar interface:
Use the following code:
ng generate interface ICar
6. Edit ICar interface:
Edit icar.ts and change it to the following:
export interface ICar {
make: string,
model: string
}
7.Create Car class:
Use the following code:
ng generate component Car --inline-template
--inline-style --flat
8. Edit Car class:
Edit car.component.ts and change it to the
following:
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ICar } from './icar';
@Component({
selector: 'car',
template: `
<p>
{{car.make}} : {{car.model}}
<button (click)="delete(car)">Delete</button>
</p> `,
styles: [] })
export class CarComponent {
@Input('theCar') car: ICar;
@Output() carDelete = new EventEmitter();
delete(car: ICar){
this.carDelete.emit(car);
}}
