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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • app.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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';
      }
    }

    chevron_right

    
    

  • parent.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • child.component.ts
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • child.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;
      }
    }

    chevron_right

    
    

  • parent.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • child.component.ts
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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); 
      }
    }

    chevron_right

    
    

  • child.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • app.component.html
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    GeeksForGeeks1
    GeeksForGeeks2
    GeeksForGeeks3



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.