Sharing Data Between Component Using Angular V4 And Above

@ViewChild

When we have the requirement, I need child value for the parent component so in this case I have one option to use @ViewChild. As in below, I am using the Child and Parent component.

Child component

app.child.component.ts

// added for view child property
childMsg: string = "Hi I am from child";

Parent component

app.component.html

<div>{{ Message }}</div>

app.component.ts

// Here we can see the Message value this.Message='I am from Parent' which I have added
// in this parent component
ngOnInit() {
    debugger;
    this.Message = 'I am from Parent';
}
// Updating value using view child when child view loaded
ngAfterViewInit() {
    //  this.Message = this.child.childMsg;
}

Now, with the message we will see the message which I have added in the parent component. You can notice here I have commented on the code within ngAfterViewInit.

In the above case, the output will be

As I already told you, ngAfterViewInit is the hook where all the child components are completely loaded and here you can set the value of the child property which I have added in the child component using View child.

Now I am using @ViewChild for getting the child property in the parent component.

app.child.component.ts

// added for view child property
childMsg: string = "Hi I am from child";

app.component.ts

// ViewChild for getting value from child
@ViewChild(ChildComponent) child;
// Updating value using view child when child view loaded
ngAfterViewInit() {
    this.Message = this.child.childMsg;
}

As you can see now I have added the code this. Message = this.child.childMsg which I am using for getting the value of child property “childMsg” and setting the “Message” property of the parent component in the ngAfterViewInit because here I can get the child value in the parent component. Now the output will be.

The complete code that I have added for the application.

• app.component.html

  <div class="parent-app">
      <button (click)="reset()">Reset count</button>
      <div>
          <h2>Parent component</h2>
          <div>
              count from child: {{ pcount }}
          </div>
          <child-comp
              [parentcount]="pcount"
              (change)="updateFromChild($event)">
          </child-comp>
      </div>
  </div>
  <div>{{ Message }}</div>
  

• app.component.ts

  // our root app component
  import { Component, VERSION, OnInit, ViewChild, AfterViewInit } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { ChildComponent } from './app.child.component';
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
  })
  export class AppComponent implements OnInit, AfterViewInit {
    constructor() {}
    // Initial value of pcount. I have added p only for parent.
    pcount: number = 0;
    Message: string = '';
    // Here we can see the Message value this.Message='I am from Parent' which I have added
    // in this parent component
    ngOnInit() {
      this.Message = 'I am from Parent';
    }
    // for event emitter
    updateFromChild($event) {
      this.pcount++;
    }
    // for reset the value from parent component
    reset() {
      this.pcount = 0;
    }
    // ViewChild for getting value from child
    @ViewChild(ChildComponent) child;
    // Updating value using view child when child view loaded
    ngAfterViewInit() {
      this.Message = this.child.childMsg;
    }
  }
  export class AppModule {}

• app.child.component.html

  <div class='child-app'>
      <h2>Child component</h2>
      <button (click)="updateCount()">Add To Parent</button>
  </div>
  

• app.child.component.ts

  import { Component, Input, Output, EventEmitter } from '@angular/core';
  @Component({
    selector: 'child-comp',
    templateUrl: 'app.child.component.html',
  })
  export class ChildComponent { 
    // Input decorator for sending value from child to parent
    @Input('parentcount')
    count: number;
    // Output decorator for sending value from parent to child
    @Output()
    change: EventEmitter<number> = new EventEmitter<number>();
    // added for view child property
    childMsg: string = "Hi I am from child";
    updateCount() {
      debugger;
      this.count++;
      this.change.emit(this.count);
    }
  }
  

• style.css for global CSS

  /* You can add global styles to this file, and also import other style files */
  .parent-app {
      border: 5px solid #CFF1E1;
      border-radius: 10px;
      background-color: #D1BFD4;
  }
  .child-app {
      border: 5px solid #CFF1E1;
      border-radius: 10px;
      background-color: #E4BDD2;
      height: 100px;
  }
  

Now one thing is very important to know when you add the child component or any component you must add a declaration within the app.module.ts file which is the main module file in my application. If you don't, the below error will show.

To resolve the above problem you will add the component name as.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// added child component
import { ChildComponent } from './app.child.component';
@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

If everything is completed above then you can simply follow the below steps for running the application.

• Step 1. Open the node js command window and move to the location where you have added the application.
• Step 2. Excute ng serve command.

If the application runs successfully, the output should be

I hope you liked this -- please share it if you did. I will define the Angular service and send value from one component to another with the help of service in my later tutorial which is one of the main features in Angular applications.