How to pass string to a component using Angular2 ?

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.

1. @Input()
2. @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 html

  <example name="GeeksForGeeks1"></example>
  <example [name]="'GeeksForGeeks2'"></example>
  <example name=" {{'GeeksForGeeks3'}} "></example>
  

• Output:

  GeeksForGeeks1
  GeeksForGeeks2
  GeeksForGeeks3