How to pass string to a component using Angular2 ? - GeeksforGeeks

15 Apr, 2020
In angular2, a component is considered as a ‘view’ with its own logic and data. Data binding is the process of combining data values with their corresponding representations. For components, string values can be passed, either directly as string literals or by storing the string literal in a variable. There are 3 ways of passing string values to components in angular2. String value bindings are described in the template section of the component.
Passing a string value to a component from its class: Here, the message variable will get its value either from the constructor of the class or by using angular event bindings(user inputs).
Syntax:
<component>{{message}}</component>
Example: It is the simplest way of passing a string to a component. The component ‘AppComponent’ has a selector called ‘app-display’ and the template for display is directed to ‘app.component.html’. When the class of the component contains the string data, it can be accessed by the component by interpolation of the ‘content’ variable.
app.component.tsimport { Component } from '@angular/core';@Component({     selector: 'app-display',    template: `app.component.html`})export class AppComponent {    content : string = "Hello World";}
import { Component } from '@angular/core';@Component({     selector: 'app-display',    template: `app.component.html`})export class AppComponent {    content : string = "Hello World";}
app.component.html<p>GeeksForGeeks</p><app-display> {{content}} </app-display>
<p>GeeksForGeeks</p><app-display> {{content}} </app-display>
Output:GeeksForGeeks
Hello World
GeeksForGeeks
Hello World
2.Passing of string value between nested components: Here, the inputField is the attribute and message is the variable that holds the required string. Interaction between components can be done using two decorators.
@Input()@Output()
@Input()
@Output()
Syntax:
<component [inputField]="message"></component>
1. @Input decorator: A string can be passed from a parent component to a child component using @Input decorator in class and a directive property of component decorator. When a variable in child component is declared with @Input decorator, that variable can be ‘received’ by the child component from the parent component template.
Example: The container component(parent) should pass the value of ‘send’ to the nested component(child). Using property binding, the binding target ‘message’ gets content from the binding source ‘send’. The directive property of component decorator for the parent component specifies that the ‘childComponent’ needs to be used. At the receiver end, the child has the @Input decorator which receives the string from parent and uses it accordingly.
parent.component.tsimport { Component } from '@angular/core';  @Component({  selector: 'parent',  template: 'parent.component.html',  directives: [ChildComponent];  })export class parentComponent {  send: string;    constructor() {    this.send = 'A message from parent';  }}
import { Component } from '@angular/core';  @Component({  selector: 'parent',  template: 'parent.component.html',  directives: [ChildComponent];  })export class parentComponent {  send: string;    constructor() {    this.send = 'A message from parent';  }}
parent.component.html<p>GeeksForGeeks</p><p>I am parent</p><child [message]="send"></child>
<p>GeeksForGeeks</p><p>I am parent</p><child [message]="send"></child>
child.component.tsimport { Component, Input } from '@angular/core';  @Component({  selector: 'child',  template: 'child.component.html',})export class childComponent {  @Input() message: string;}
import { Component, Input } from '@angular/core';  @Component({  selector: 'child',  template: 'child.component.html',})export class childComponent {  @Input() message: string;}
child.component.html<p>I am child</p><child>{{message}}</child>
<p>I am child</p><child>{{message}}</child>
Output:GeeksForGeeks
I am parent
I am child
A message from parent
GeeksForGeeks
I am parent
I am child
A message from parent
2. @Output decorator: This approach is used to emit data from the child, which is received by the parent. For an @Output decorator to decorate any property of the nested class, the property type must be an event. The only way a nested component can pass back data to its container is with an event. The data to pass is called event payload. In angular2, an event is defined with an EventEmitter object.
Example: The child component will have an instance of an EventEmitter object using @Output property. A function is invoked (here, a button click) to trigger the passing of string. On the other hand, the parent component which has the child component bounded to it using the directives decorator will receive the payload using another function that can be used as per interest.
parent.component.tsimport { Component } from '@angular/core';  @Component({  selector: 'parent',  template: `parent.component.html`,  directives: [ChildComponent]})  export class ParentComponent {      parentText = 'I am Parent';    constructor () { }      recievemsg($text) {    this.parentText = $text;  }}
import { Component } from '@angular/core';  @Component({  selector: 'parent',  template: `parent.component.html`,  directives: [ChildComponent]})  export class ParentComponent {      parentText = 'I am Parent';    constructor () { }      recievemsg($text) {    this.parentText = $text;  }}
parent.component.html<p> {{ username }} </p><child (messageEmitter)="recievemsg()"></child>
<p> {{ username }} </p><child (messageEmitter)="recievemsg()"></child>
child.component.tsimport { Component, Output, EventEmitter } from '@angular/core';  @Component({  selector: 'child-',  template: `child.component.html`,})  export class ChildComponent {  message: string = "Message From Child";    // New EventEmitter object for emitting string  @Output() messageEmitter = new EventEmitter<string>();      sendmsg() {          // Emit message on click    this.messageEmitter.emit(this.message);   }}
import { Component, Output, EventEmitter } from '@angular/core';  @Component({  selector: 'child-',  template: `child.component.html`,})  export class ChildComponent {  message: string = "Message From Child";    // New EventEmitter object for emitting string  @Output() messageEmitter = new EventEmitter<string>();      sendmsg() {          // Emit message on click    this.messageEmitter.emit(this.message);   }}
child.component.html<p>GeeksForGeeks </p><p>Child called</p><button (click)="sendmsg()"> Send Message </button>
<p>GeeksForGeeks </p><p>Child called</p><button (click)="sendmsg()"> Send Message </button>
Output:GeeksForGeeks
Child called
I am Parent
Message from child
GeeksForGeeks
Child called
I am Parent
Message from child
Note:The above two methods are used for passing strings to components by interpolation.
Passing the string value directly to the component without interpolation: Here, ‘message’ itself is the string and is given as input to the inputField attribute of the component.
Syntax:
<component inputField="message"></component>
(or)
<component [inputField]="'message'"></component>
(or) 
<component inputField="{{'message'}}"></component> 

Example: The following example covers all the three methods.
app.component.tsimport { Component } from '@angular/core';@Component({  selector: 'example',  templateUrl: './app.component.html',  })export class AppComponent  {}
import { Component } from '@angular/core';@Component({  selector: 'example',  templateUrl: './app.component.html',  })export class AppComponent  {}
app.component.html<example name="GeeksForGeeks1"></example><example [name]="'GeeksForGeeks2'"></example><example name=" {{'GeeksForGeeks3'}} "></example>
<example name="GeeksForGeeks1"></example><example [name]="'GeeksForGeeks2'"></example><example name=" {{'GeeksForGeeks3'}} "></example>
Output:GeeksForGeeks1
GeeksForGeeks2
GeeksForGeeks3
GeeksForGeeks1
GeeksForGeeks2
GeeksForGeeks3
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?