KEMBAR78
Angular EventEmitter & DI Guide | PDF
Scribd
Upload
54 views2 pages

Angular EventEmitter & DI Guide

The document describes how to implement communication between a child and parent component in Angular using an EventEmitter and @Output property. The child component emits data by calling the emitData() method, which passes the data to the EventEmitter. The parent component listens for this event using (dataEvent) and calls the receiveData() method to handle the emitted data. Dependency injection allows components and directives to inject dependencies like services, making their functionality available across the application.

Uploaded by

Camelia Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views2 pages

Angular EventEmitter & DI Guide

The document describes how to implement communication between a child and parent component in Angular using an EventEmitter and @Output property. The child component emits data by calling the emitData() method, which passes the data to the EventEmitter. The parent component listens for this event using (dataEvent) and calls the receiveData() method to handle the emitted data. Dependency injection allows components and directives to inject dependencies like services, making their functionality available across the application.

Uploaded by

Camelia Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

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

@Component({
selector: 'app-child',
template:`
<button (click)="emitData()">Click to emit data</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {

data:string = "Message from child to parent";

@Output() dataEvent = new EventEmitter<string>();

constructor() { }

emitData(){
this.dataEvent.emit(this.data);
}
}

As you can see in the child component, we have used @Output property to bind


an EventEmitter. This event emitter emits data when the button in the template is
clicked.

In the parent component’s template we can capture the emitted data like this:

<app-child (dataEvent)="receiveData($event)"></app-child>

Then inside the receiveData function we can handle the emitted data:

receiveData($event){
this.dataFromChild = $event;
}

14. Explain the concept of Dependency Injection?


Dependency injection is an application design pattern which is implemented by Angular.
It also forms one of the core concepts of Angular.

So what is dependency injection in simple terms?


Let’s break it down, dependencies in angular are nothing but services which have a
functionality. Functionality of a service, can be needed by various components and
directives in an application. Angular provides a smooth mechanism by which we can
inject these dependencies in our components and directives.
So basically, we are just making dependencies which are injectable across all
components of an application.

Let’s understand how DI (Dependency Injection) works:

Consider the following service, which can be generated using:


ng g service test

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

@Injectable({
providedIn: 'root'
})
export class TestService {
importantValue:number = 42;

constructor() { }

returnImportantValue(){
return this.importantValue;
}
}

You might also like