KEMBAR78
Component Communication | PDF
Scribd
Upload
10 views1 page

Component Communication

The document outlines the structure and creation of components in a User Interface, specifying that each component consists of four files: TypeScript, HTML, CSS, and testing files. It explains component nesting, where parent components contain child components, and details three methods for component communication: parent to child, child to parent, and component to component. Specific examples of data transfer between components using @Input() and @Output() are also provided.

Uploaded by

Omkar Kalange
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views1 page

Component Communication

The document outlines the structure and creation of components in a User Interface, specifying that each component consists of four files: TypeScript, HTML, CSS, and testing files. It explains component nesting, where parent components contain child components, and details three methods for component communication: parent to child, child to parent, and component to component. Specific examples of data transfer between components using @Input() and @Output() are also provided.

Uploaded by

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

Component: Component is the logical division of User Interface.

Each component will have 4 files


1. component.ts(component)
2.component.html(template)
3.component.css(styling)
4.component.spec.ts(testing)

Every component have a name called selector. wherever you mention selector, there
the component appears.

one component inside another component called as nesting of components


container components called as parent component, inner components called as child
component

To create component follow below command: ng generate component component-name

Component Communication: one component can send data to another component.


There are three ways to achieve it.
1. parent to child
2. child to parent
3. component to component

1. parent to child:
parent component send the data to child as properties and child will receive as
@Input()

//parent-component.html
<app-child title="xyz"></app-child>

//child-component.ts
@Input() title;

2. child to parent:
child component to parent component communication can be done in three ways
1.@output():

2.@viewChild()
3.template reference variable

You might also like