@Input and @Output decorator in Angular

@Input Decorator

<div><h1>This is parent components</h1><div><app-student></app-student></div></div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
message: string = 'this message from parent';
}
<div><h1>This is parent components</h1><div><app-student [myMessage]="message"></app-student></div></div>
import { Component, Input, OnInit } from '@angular/core';@Component({selector: 'app-student',templateUrl: './student.component.html',styleUrls: ['./student.component.css'],})
export class StudentComponent implements OnInit {
@Input() myMessage: string;constructor() {}ngOnInit(): void {}}
<div>{{ myMessage }}</div>

@Output decorator

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-student',templateUrl: './student.component.html',styleUrls: ['./student.component.css'],})export class StudentComponent implements OnInit {@Input() myMessage: string;@Output() myOutMsg: EventEmitter<string> = new EventEmitter();constructor() {}
ngOnInit(): void {}
}
<div>{{ myMessage }}<button (click)="sendMsg()">send message to parent</button></div>
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-student',templateUrl: './student.component.html',styleUrls: ['./student.component.css'],})export class StudentComponent implements OnInit {@Input() myMessage: string;@Output() myOutMsg: EventEmitter<string> = new EventEmitter();constructor() {}
ngOnInit(): void {}
sendMsg() {
this.myOutMsg.emit('I am child component');
}
}
<div><h1>This is parent components</h1><div><app-student [myMessage]="message" (myOutMsg)="messageFromchild($event)"></app-student></div></div>
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})export class AppComponent {message: string = 'this message from parent';msgFromchild: string = '';messageFromchild(data) {
this.msgFromchild = data;
}

}
<div><h1>This is parent components</h1><h1>{{ msgFromchild }}</h1><div><app-student[myMessage]="message"(myOutMsg)="messageFromchild($event)"></app-student></div></div>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store