Scribd
Upload
116 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
116 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
We take content rights seriously. If you suspect this is your content, claim it here.
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