Decorator in Angular 8 | How to pass data from one component to another in angular 8
Decorators are a design that is used to separate modification or decoration of a class without modifying the original source code.
Decorators are of 4 types.
- Class Decorators
- Property Decorator
- Method Decorator
- Parameter Decorator
In this article we will discuss about Property decorator.
Property decorator
Property decorators are the 2nd most common decorator in angular.
Property decorators is of 2 types
- Input
- Output
 |
| Input Output Decorator |
Input Decorator
Input decorator is declared as @Input().
@Input() can be declared by importing Input interface.
@Input() can be declared by importing Input interface.
With the Input decorator we simply put the @Input() before the property which angular compiler automatically create input binding from the property name and link them.
Lets Implement Input decorator in Angular 8.
Before that Lets create a folder called Test.
1.Go to App.component.ts and add the below code.
export class AppComponent {
myvar: string = "This is my Input property....";
}
2.Go to App.component.Html and add the below code.
<example-component [inputprop]='myvar'></example-component>
In the above we are binding a user defined property called "inputprop" which will be linked to the Input property.
3.Create a typescript file called Test.component.ts. and write the below code under the file.
import { Component,Input } from '@angular/core';
@Component({
selector: 'example-component',
template: '<div>{{name}} {{inputprop}}</div>',
})
export class ExampleComponent {
name: string = "This is my component!!!!!";
@Input() inputprop:string
}
In the above code we link the property defined in the App.component.ts to the above code by declaring @Input.
We are done!!!!!!!!
Once we run the application we can able to see the output in the browser...
Output Decorator
Output Decorator
Now Lets understand Output decorator .
Output decorator declared as @output().
@Output() can be declared by importing Output Interface and EventEmitter class.
The logic behind this is variable associated with @Output hold the event assigned by EventEmitter class.
Event can be emit with the help of emit().
Lets take a scenario.
A button and string value is in child component.
When button clicked then the string value will be displayed in the parent component.
Lets implement the output decorator .
1. Under Test.component.ts write the below code.
import { Component,Output,EventEmitter} from '@angular/core';
@Component({
selector: 'example-component',
templateUrl: 'app/Test/Test.component.html',
})
export class ExampleComponent {
@Output() mydataevent = new EventEmitter<string>();
myoutputdata: string = "My output data";
GetData(): void {
this.mydataevent.emit(this.myoutputdata);
}
}
@Component({
selector: 'example-component',
templateUrl: 'app/Test/Test.component.html',
})
export class ExampleComponent {
@Output() mydataevent = new EventEmitter<string>();
myoutputdata: string = "My output data";
GetData(): void {
this.mydataevent.emit(this.myoutputdata);
}
}
In the above Output interface and EventEmitter class are imported.
mydataevent hold the event and emitted to the parent in the hilighted text.
2. Under Test.component.html write the below code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button (click)="GetData()">Click Me</button>
</body>
</html>
In the above we are generating a click event and call a method called GetData() to execute the method.
3. App.Component.html write the below code.
<example-component (mydataevent)=displaymethod($event)></example-component>
{{mytestvalue}}
In the above code we received the event highlighted above and then call the displaymethod($event) to display the method content.
$event received the data passed from the child component.
4. App.Component.ts write the below code.
export class AppComponent {
mytestvalue: string;
displaymethod(myvalue:string): void {
this.mytestvalue = myvalue;
}
mytestvalue: string;
displaymethod(myvalue:string): void {
this.mytestvalue = myvalue;
}
In the above we receive data and display the data in the html by {{mytestvalue}}
5. Do not forget to register the associated component class in the the app.module.ts.
You can run the application and Generate a event by clicking the button. You can see the output as below once u click the button.
 |
| Output Decorator |
We are done!!!!!!!!!!!!!!!!!
No comments:
Post a Comment