Angular 4 Communication Between Components using @Input () and @Output ()  (Angular 4) - #12

Angular 4 Communication Between Components using @Input () and @Output () (Angular 4) - #12

Md Junaid Alam

7 лет назад

29,825 Просмотров

This video tutorial demonstrates a step by step and from scratch, the use of @Input() and @Output() in Angular 2 / Angular 4 to communicate between components, where one component can send message or data to another component. A parent can send data to child component and a child to parent,

Тэги:

#angular #angular_2 #angular_4 #junaid #junaid_alam #@Input() #@Output() #angular_components #component_communication #EventEmitter #Custom_Events
Ссылки и html тэги не поддерживаются


Комментарии:

@TechAahar
@TechAahar - 02.10.2020 20:03

Very nice and informative tutorial, thank you for sharing with us.
For initial checking you can use *ngIf that will not allow to display the undefined data. Thank you for sharing stay connected :)

Ответить
@namanmishra5544
@namanmishra5544 - 10.05.2020 12:20

I want to refresh parent data on closing popup. parent data is coming as @Input to my component . can u please help me how can i achieve that

Ответить
@avinashmaggidi9749
@avinashmaggidi9749 - 12.06.2019 22:02

Your way of explaining is good brother. But it goes slower a bit lengthy in explanation. But you are great teaching skills and talent..👍👍

Ответить
@chetannaik8073
@chetannaik8073 - 14.11.2018 16:40

awesome video and you hav explained so cleanly...thanks :)

Ответить
@ManishKumar-rf3gu
@ManishKumar-rf3gu - 26.08.2018 12:58

Superb tutorial for beginner.

Ответить
@niteshchaturvedi1054
@niteshchaturvedi1054 - 18.08.2018 11:03

lecture is great helpfull. i need help on issue, can u share you contact number on ?,it would help alot.

Ответить
@niteshchaturvedi1054
@niteshchaturvedi1054 - 17.08.2018 10:13

please remove noise.

Ответить
@mshubhamtyagi9166
@mshubhamtyagi9166 - 14.07.2018 08:14

I am using one form for adding and updating the details. I want to change the form title for both these separate action. Please guide me.

Ответить
@gkmishra2009
@gkmishra2009 - 20.06.2018 15:36

please give video on web api and angular 4

Ответить
@nikhilpadmawar3911
@nikhilpadmawar3911 - 09.06.2018 10:16

Hello Sir.....Will you please make video for "which UI components should we use with angular 2/4/6 ?"

Ответить
@sunilbehera6173
@sunilbehera6173 - 18.05.2018 15:41

can you send all code in description ?

Ответить
@sunilbehera6173
@sunilbehera6173 - 18.05.2018 15:41

can you send all code in description ?

Ответить
@arunks8162
@arunks8162 - 06.04.2018 18:13

anyway this video help me alot thanks for that

Ответить
@arunks8162
@arunks8162 - 06.04.2018 18:09

tin pe hathodaa marne jaise aawaj hi teri mouse ki

Ответить
@subhasism1890
@subhasism1890 - 18.02.2018 22:22

You are Great Sir

Ответить
@mdakhlack3635
@mdakhlack3635 - 13.02.2018 19:42

Very Helpful video. Jazak Allah Khair.

Ответить
@navidansari1895
@navidansari1895 - 08.02.2018 20:14

Hi Junaid.. Please show us how to use @input and @output with child parent app(i.e one common parent as a header and multiple childs running under parent in <router-outlet><router-outlet>. I am able to send data but whole template also get displayed when i bind @input property to component selector. I am banging my head from last 2 days.

Ответить
@vvikky8562
@vvikky8562 - 06.02.2018 11:12

Great tutorials. How can i highlight the selected row?

Ответить
@ZiaQammar
@ZiaQammar - 27.01.2018 16:51

you make it so much lengthy lecture. it should be just about input and output binding. you are just going to start it from scratch

Ответить
@ashwini4444
@ashwini4444 - 13.01.2018 21:09

Can we use Alias name which we have set in @Input('Name') in expressions while displaying the data {{Name}}????

Ответить
@manojradharapu9083
@manojradharapu9083 - 27.12.2017 13:48

Sir! Please make on ContentChild and ContentChildren

Ответить
@tangocukedi1
@tangocukedi1 - 19.11.2017 23:05

can you do the same with sibling components?

Ответить
@angelpellejero8764
@angelpellejero8764 - 17.11.2017 11:16

Really nice tutorial!

Ответить
@ShubhamKumar-sz1fl
@ShubhamKumar-sz1fl - 15.11.2017 20:45

Hi ...greate videos .....I want to know i was doing practice exercise i was trying to send data from one child component to other child in second child i am displaying some data from a array declared in ts of second child .......i want to push new item in list when i receive a input ........where to write that function

Ответить
@farhanahmedsyed
@farhanahmedsyed - 15.11.2017 00:24

awesome

Ответить
@kvsnsuraj6786
@kvsnsuraj6786 - 08.10.2017 14:08

sir your videos explanations are quite good and they are understandable.Sir please provide videos on pdf viewer in ionic framework and they must work in ios devices please try them

Ответить
@PARVEENKUMAR-qr9cz
@PARVEENKUMAR-qr9cz - 07.10.2017 20:48

Thanks..It's really helpful..

Ответить
@Gol_D_Roger_The_Pirate_King
@Gol_D_Roger_The_Pirate_King - 05.10.2017 15:56

Why are you making your own file? You can make component inside the cli just type "ng g component nameofcomponent". With this method there is no error because angular itself add the components in the module.

Ответить
@hemanthkumar1558
@hemanthkumar1558 - 02.10.2017 21:28

hey.. Can i know why u creating component manually? we can use ng generate component right? that ll be good practice i guess ...

Ответить
@navaneethreddy6059
@navaneethreddy6059 - 29.08.2017 17:51

its great ..... I want to learn angular 2 input and output. Will it work??

Ответить
@rupank6396
@rupank6396 - 24.08.2017 07:34

How to change color of some text randomly on button-click? For example:

text = "hello world"
palette = ['red', 'yellow', 'blue', 'green', 'grey', 'orange', 'cyan']
const anyColor = Math.floor(Math.random() * (this.palette).length)
this.text = this.text.fontcolor(this.palette[anyColor])

but it's not working as expected, could you help me through this? Thanks.

Ответить
@ashizhamal9944
@ashizhamal9944 - 12.08.2017 09:54

How auto scroll is working while selecting..what make that doing?? Explain please.

Ответить
@abdulmobeen-developer
@abdulmobeen-developer - 28.07.2017 21:13

is there a quick way to include node_modules folder from already created Angular projects
which reside in same folder in which I am creating new project. e.g

app1/
/node_modules
/src
.
.


app2/
/can i include node_modules dir for this project
/src
.
.
because it takes much too time each time I create a new project.

thanks in advance.

Ответить
@lalitpant5561
@lalitpant5561 - 26.07.2017 09:06

Thanks, Nice topic to learn angular parent child

Ответить
@ozzibuy4527
@ozzibuy4527 - 08.07.2017 23:19

Hi Junaid, I have a question when we wrap property in child selector like this <app-child> [sample]="samplevalue" </app-child> in the parent.html file, it works fine but problem I am facing that parent HTML also import whole background and other elements or data from child page. how I can make parent.ts property globally available to the child, just the property value. Thanks

Ответить
@andrecardoso8950
@andrecardoso8950 - 30.06.2017 17:35

Thank you for some information that you present on this video.
But... 47min video?! Nobody have the time to see everything. I speed up x2 and still the image wasn't fast enough.
Improve the time video, be more direct ;)

Ответить