CODEWITHSUNDEEP
angulartypescript
Arun
Arun

Reputation: 3700

Pass a text from one component to another component in Angular

Below is my landing-HTML page

<div class="container">

  <div>
    <mat-radio-group class="selected-type" [(ngModel)]="selectedType" (change)="radioChange()">
      <p class="question">Which movie report would you like to see ?</p>
      <mat-radio-button id="movie-a" class="Movie-type" [value]="MovieType.HORROR">Horror</mat-radio-button>
      <mat-radio-button id="movie-b" class="Movie-type" [value]="MovieType.ROMANTIC">Romantic</mat-radio-button>

    </mat-radio-group>
  </div>

    <movie-report *ngIf="showMovieReport"></movie-report>

</div>

This <movie-report> is a different component and has its own component.ts which makes REST Call and give some data.

I wanted to pass the MovieType data to MovieReport component. How to do it ?

Upvotes: 2

Views: 1308

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86800

You need to use @Input to do so like below -

<movie-report [type]='MovieType' *ngIf="showMovieReport"></movie-report>

and In order to get this in the component movie-report you need to use @Input 

export class MovieReportComponent {
  @Input('type') type: string;
  // You will get Input Data in ngOnInit life cycle hook of Angular component
}

For more details refer here -

Upvotes: 5

Andrew Rayan
Andrew Rayan

Reputation: 370

If you want to send the selected movie type instead of passing 'MovieType' pass 'selectedType' as input param.Check whether selected value is empty or not.

<ng-container *ngIf='selectedType'>
    <movie-report [type]='selectedType' *ngIf="showMovieReport"></movie-report>
</ng-container>

In movie-report component

export class MovieReportComponent {
  @Input('type') type: string;
}

Upvotes: 1

Related Questions