AngularJS - Passing values among components

Simple example to explain how we can pass values from one component to another component.

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

@Component({
  selector: 'app-root',
  template:`<div style="text-align:center">
              <h1>
                Welcome to {{title}}!
              </h1>
              <p>
                <todaytime></todaytime>
              </p>
            </div>
            <div style="text-align:center">
              <message value="Example of passing data among components"></message>
            </div>
            `,
  })
export class AppComponent {
  title = 'app';
}




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

@Component({
    selector:"message",
    template:`<h3>{{message}}</h3>`
})
export class MessageComponent{
    @Input('value') message:String;
}

 

Tags