how two components talk each other in angular 2

Question

I have create two component: 1. create-articles : is used to create article. 2. List Articles : is used to list all the articles.

Parent component is Home Component

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


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']

})
export class HomeComponent implements OnInit {
  constructor() { 
    
  }

  ngOnInit() {
  }

}

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <articles-form></articles-form>
        </div>
        <div class="col-md-4">
            <articles></articles>
        </div>

    </div>
</div>

i want to reresh the article list component whenever article is created.

import { Component, OnInit } from '@angular/core';
import { ArticlesService } from '../../services/articles.service';
import { Article } from '../../models/article.model';
import { IArticles } from '../../interfaces/IArticles';
import { Observable } from 'rxjs';

@Component({
  selector: 'articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css'],
  providers:[ArticlesService]
})
export class ArticlesComponent implements OnInit {

 articles: IArticles[];
 message:string;
 errorMessage:string;
 constructor(private as:ArticlesService) { }
 ngOnInit():void {
    this.fetchArticles();
 }
  
 fetchArticles(): void {
        this.as.getArticles()
       .subscribe( articles => {
            this.articles = articles
            console.log(this.articles);
        },
     error => this.errorMessage = <any>error);    
   };


}

<button class="btn btn-primary" (click)="fetchArticles()">
 Reload Data
</button>
<div class="table table-responsive">
 <table class="table table-bordered">
  <thead>
   <tr>
    <th>#</th>
    <th>Title</th>
   </tr>
  </thead>
  <tbody>
   <tr *ngFor="let article of articles;let i=index">
    <td>
     {{i+1}}
    </td>
    <td>
     {{article.articles.title}}
    </td>
   </tr>
  </tbody>
 </table>
</div>

import { Component, OnInit } from '@angular/core';
import { ArticlesService } from '../../services/articles.service';
import { Article } from '../../models/article.model';
import { IArticles } from '../../interfaces/IArticles';
import { Observable } from 'rxjs';
import { ArticlesComponent } from '../articles/articles.component';
import { EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'articles-form',
  templateUrl: './articles-form.component.html',
  styleUrls: ['./articles-form.component.css'],
  providers:[ArticlesService]
})
export class ArticlesFormComponent implements OnInit {
  books: IArticles[];
    article:IArticles=new Article(1,"Let Us C","Rahul Shaw","http://google.com");
  message:string;
  errorMessage:string;
  articles:IArticles[];
    constructor(private as:ArticlesService) { }

        ngOnInit():void {}

      onSubmit(data:IArticles) : void{
          var articles=this.as.createArticles(data)
          .subscribe( book => {
              this.message = "submitted"; 

          },
          error => this.errorMessage = <any>error);
      };

}

<div class="panel panel-primary">
    <div class="panel-body">
        <h1>Article Posting</h1>
        <form (ngSubmit)="onSubmit(article)">
            <div class="form-group">
              <label for="title">Title</label>
              <input type="text" class="form-control" id="title" required [(ngModel)]="article.title" name="title">
            </div>
            <div class="form-group">
              <label for="author">Author</label>
              <input type="text" class="form-control" id="author" required [(ngModel)]="article.author" name="author">
            </div>
            <div class="form-group">
              <label for="url">URL</label>
              <input type="text" class="form-control" id="url" [(ngModel)]="article.url" name="url">
            </div>
            <button type="submit" class="btn btn-default">      Submit
            </button>
            {{ name }}
        </form>
    </div>
</div>

i want to refresh the article list component whenever article is created.

Answer 1

Possible Answer:-

Homecomponent.html(Parent)

<create-article  [data]="createarticleData"></create-article>
<list-article [data]="listarticleData"></list-article>

Homecomponent.ts(Parent)

createarticleData = "{"key":"value"}"
listarticleData= "{"key":"value"}"

create-article.component.ts

@Input data;

list-article.component.ts

@Input data;

For Calling a function:-

With type selector

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}
@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {
  @ViewChild(ChildCmp) child:ChildCmp;
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

With string selector

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}
@Component({
  selector: 'some-cmp',
  template: '<child-cmp #child></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {
  @ViewChild('child') child:ChildCmp;
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Answer 2

There are many ways to skin a cat.

You have 3 components:

1. HomeComponent - has child components ArticlesFormComponent & ArticlesComponent
2. ArticlesFormComponent - A component with a form to create new Articles.
3. ArticlesComponent - A component to fetch and list all Articles.

The idea is that you are already fetching the list of articles for ArticlesComponent and you are probably storing it in some array like articlesArray, so when you create a new article from ArticlesFormComponent, you fire a http request and if it returns a success response, you can add that article to the already existing articlesArray, and it will automatically be affected in ArticlesComponent.

You already have an ArticlesService which handles the http request, but since your ArticlesService is provided in the component level, it has different instances. It will be better to provide your ArticlesService in the module level so that your application will have a single instance.

@NgModule({
    ...
    providers:[
         ...,
         ArticlesService
    ]
})
export class AppModule { }

Answer 3

You can communicate with components in Different Way.

create a service to emit event from child to parent via subject so that you can subscribe the data any where in the app and it will be update automatically

Check the example snippet below

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <app-articles-form></app-articles-form>
        </div>
        <div class="col-md-4">
            <app-articles></app-articles>
        </div>

    </div>
</div>

check the example:https://stackblitz.com/edit/angular-jncwsq