Click to setup Angular environment
In this demonstration, we will demonstrate how to pass data from
Parent to Child and Child to Parent using @Input() and @Output() properties?.
Let's Start
Step 1: - Create “AngularDemo”
folder in the D drive
Step 2: - Open Visual Studio Code
Step 3: - Go to File =>
Click on Open Folder… => Browse and select created folder “AngularDemo”
in the D drive
Step 4: - Open Terminal => Go to Terminal => Click on New Terminal => Type ng new AngularPassDataFromParentToChild => Press Enter
Step 5: -? Would you like to add Angular routing? (y/N) => Type N => Press Enter
Step 6: -? Which stylesheet format would you like to use? (Use arrow keys) => Select CSS => Press Enter
Note: - Project
created
Step 7: - Go to File => Click on Open Folder… => Browse and select created Project AngularRoute from path D:\AngularDemo\AngularPassDataFromParentToChild
Step 8: -Project Loaded in Visual Studio Code
Step 9: - Open Terminal => Go to Terminal => Click on New Terminal
Step 10: - Add Parent component => Type ng g c Parent => Press Enter
Step 11: - Add Child component =>Type ng g c Child => Press Enter
Step 12: - Open parent.component.ts file => Copy Past
following in parent.component.ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
SendMessageToChild : string = "Welcome my child";
constructor() { }
ngOnInit(): void {
}
onClick(Message : string) {
window.alert(Message);
}
}
Step 13: - Open parent.component.html file => Copy Past
following in parent.component.htm file
<app-child
[Message]="SendMessageToChild"
(ChildButtonEvent)="onClick($event)">
</app-child>
Step 14: - Open child.component.ts file => Copy Past
following in child.component.ts file
import { Component, OnInit, Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() Message : string;
@Output() ChildButtonEvent = new EventEmitter<string>();
SendMessageToParent : string = "Thank you Parent";
constructor() { }
ngOnInit(): void {
}
}
Step 15: - Open child.component.html file => Copy Past
following in child.component.html file
<h3>This message received from parent: {{Message}} </h3>
<button (click)="ChildButtonEvent.emit(SendMessageToParent)">Button from Child
</button>
<!-- OR -->
<!-- <button (click)="onClick()">Button from Child</button> -->
Step 16: - Open app.component.ts file => Copy Past following
in app.component.ts
file
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Pass Data from Parent to Child ' + VERSION.major;
}
Step 17: - Open app.component.html file => Copy Past
following in app.component.html file
<div class="container">
<h1>Hello {{title}}! </h1>
<app-parent></app-parent>
</div>
Step 18: - To use bootstrap => Open index.html
file and add bootstrap CDN link in html head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularPassDataFromParentToChild</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>
Step 19: - Open Terminal =>
Type ng serve --o => Press Enter
ALL DONE
Output
No comments:
Post a Comment