How to pass string to a component using Angular2 ?

Last Updated : 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.ts

javascript

import { Component } from '@angular/core';
@Component({ 
    selector: 'app-display',
    template: `app.component.html`
})
export class AppComponent {
    content : string = "Hello World";
}

app.component.html

html

<p>GeeksForGeeks</p>
<app-display> {{content}} </app-display>

Output:
```
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()

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.ts

javascript

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

html

<p>GeeksForGeeks</p>
<p>I am parent</p>
<child [message]="send"></child>

child.component.ts

javascript

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child',
  template: 'child.component.html',
})
export class childComponent {
  @Input() message: string;
}

child.component.html

html

<p>I am child</p>
<child>{{message}}</child>

Output:

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.ts

javascript

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

html

    
    <p> {{ username }} </p>
    <child (messageEmitter)="recievemsg()"></child>

child.component.ts

javascript

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

html

<p>GeeksForGeeks </p>
<p>Child called</p>
<button (click)="sendmsg()"> Send Message </button>

Output:

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.ts

javascript

import { Component } from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: './app.component.html',  
})
export class AppComponent  {
}

app.component.html