Scribd
Upload
139 views

Formation Angular Lab 2 More Components: Lab 2.1: Data Flowing Downwards

This document provides instructions for two Angular labs on component data flow: 1. Lab 2.1 shows data flowing down from a parent AppComponent to child CarComponents. The app passes a list of car objects to multiple CarComponents. 2. Lab 2.2 demonstrates data flowing up from CarComponents to the parent via an event emitter. Each CarComponent emits a 'delete' event along with the car object, and the parent handles the delete.

Uploaded by

Sana Bargaoui
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
139 views

Formation Angular Lab 2 More Components: Lab 2.1: Data Flowing Downwards

This document provides instructions for two Angular labs on component data flow: 1. Lab 2.1 shows data flowing down from a parent AppComponent to child CarComponents. The app passes a list of car objects to multiple CarComponents. 2. Lab 2.2 demonstrates data flowing up from CarComponents to the parent via an event emitter. Each CarComponent emits a 'delete' event along with the car object, and the parent handles the delete.

Uploaded by

Sana Bargaoui
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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);
}}

You might also like