Angular Parent Child Communication - Pass Your Data Correctly

Показать описание

In this video you will learn how Angular input output parent and child components can communicate with each other. We are using input decorator and output decorator to describe Angular component communication. On the real example you will see how we can pass data from parent component to our child component and how thorough events child component can notify parent about some changes.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
4:40 Angular input decorator
7:17 Angular output decorator
15:38 Call to action

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

Рекомендации по теме

Комментарии

I was looking for a good angular resource to learn and luckily found your channel Thank

mohammedmerajpasha

is it possible to have the advanced course for free ? thanks

ahmedmk

Hi, i thought it's better to put the function in the child component rather than the parent component?

SyahirahFaizal

Thank You. But I think you need to increase your speed a bit.

fahadhafeez

user-list.component.ts
Member 'users' implicitly has an 'any' type.

if I create user.ts
export type User = {
id: string;
name: string;
age: number;
}

and change @Input at user-list.component.ts as below:
@Input() users!: User[];

everything works.

But if I took away the exclamation mark then I received the message:

Property 'users' has no initializer and is not definitely assigned in the constructor.

What does it mean in case of @Input? We have to initiialize it somehow?

artem_zakharchuk

Angular Parent Child Communication - Pass Your Data Correctly

Sharing Data between Components in Angular

Angular Parent Child Communication - Pass Your Data Correctly

@Input in Angular | Sharing data from parent to child component | Angular Tutorial

Communicate from Parent to Child Component - Angular (Tutorial #13)

Parent and child component in Angular | child component in angular | Angular tutorials in Telugu

Angular 10 tutorial #22 Send data child to parent component

How Child Components Communicate with Parent Components in Angular Explained

Part 5 - Parent Child Component Communication | Angular 12 | Learn from Scratch

Data transfer between components in angular 13 (parent to child + @input + @Output + @ViewChild)

Angular 12 tutorial in Hindi #28 Send data child to parent component

Angular's New Model Inputs: Two-way Communication with your Child Components

(15) Pass data from parent to child component in angular - Angular Tutorial for Beginners

Angular 10 tutorial #20 pass data parent to child

24 | How To Pass Data From Child To Parent Component In Angular | Component Interaction (Hindi/Urdu)

child to parent communication in Angular | component communication in Angular |Angular tutorials

Angular Component Interaction - 7 - Parent and Child

Angular 12 - Sharing data between child and parent components with @Input and @Output decorators.

What is Child Component | Components | Angular 12+

Angular 12 tutorial in Hindi #26 Pass Data child to component

Communicate from Child to Parent Component - Angular (Tutorial #14)

Parent to child communication in Angular | input decorator in angular|Angular tutorials in Telugu

Mastering @Output in Angular: A Simple Guide to Parent-Child Component Communication

Angular: Component Communications (Child to Child)

component communication in Angular | input output decorators in angular|Angular tutorials in Telugu