2 views

Communicating with Parent Components in Angular

bipon68Angular, Angular Component

Step1: events-app.component.ts file

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

@Component({
  selector: 'events-app',
  template: `
    <events-list></events-list>
  `
})
export class EventsAppComponent {
  title = 'ng-fundamentals';
}

Step2: events-list.component.ts file 

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

@Component({
    selector: "events-list",
    template: `
    <div>
    <h2>Upcoing Angular Evnets</h2>
        <hr>
        <event-thumbnail (eventClick)="handleEventClicked($event)"
            [event]="event1"></event-thumbnail>
    </div>
    `
})


export class EventListComponent{

    event1 = {
        id: 1,
        name: 'Angular Connect',
        date: '9/27/2019',
        time: '10:00 am',
        price: 999.90,
        imageUrl: '/assets/images/angularconnect-shield.png',
        location: {
            address: '1047 DT',
            city: 'London',
            country: 'England'
        }
    }

    handleEventClicked(data){
        console.log('data : ', data);
    }

}

Step3: events-thumbnail.component.ts file 

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

@Component({
    selector: 'event-thumbnail',
    template: `        
        <div class="well thumbnail">
            <h2>{{event.name}}</h2>
            <div>Date: {{event.date}}</div>
            <div>price: ${{event.price}}</div>
            <div>time: {{event.time}}</div>
            <div>
                <span>Location: {{event.location.address}}</span>
                <span> </span>
                <span>{{event.location.city}}, {{event.location.country}}</span>
            </div>
            <button class="btn btn-primary" (click)="handleClickMe()">click me </button>
        </div>

    `
})

export class EventThumbnailComponent{
    @Input() event: any;
    @Output() eventClick = new EventEmitter()

    handleClickMe(){
        this.eventClick.emit(this.event.name);
        // console.log('Click me');
    }
}

app.module.ts file (Register events component, event list component and event thumbnail component in angular module )

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }

index.html file

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ng Fundamentals</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div class="container">
    <events-app></events-app>
  </div>
  
</body>
</html>

Leave a Reply