Angular 2 Tutorial #14 - Custom Property Binding (& @Input)

Yo gang, in this Angular 2 tutorial, we'll take a look at custom property bindings and how they can help us pass data from one components into another. To do this we'll also have to use the @Input decorator too.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[juice]

Was having little hard uderstanding a Udemy Course on this topic and your explanation was exactly what I needed. Simple and precise. I wanted to go through your couse but it was created 6 years ago and the course on Udemy was just a year old. I wish it was a recently uploaded course.

[spartaklalaj]

The logic is the same but you have to put inputs field into component decorator like this:
@Component({
inputs: ["ninja"],
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})

[Chocoholic]

Thank you very much for this video. I was following a course, that went over this topic a bit too fast. I found this video, and it made things crystal clear. Keep up the good work.

[mvaneijgen]

Finally someone explaining it really well. Thanks for this video!

[bijay]

Hi Shaun, I understand you put a lot of effort to make this awesome tutorial series and you always do. No doubt we all love your tutorials, but I believe this Angular 2 tutorials needs to be updated because so many things have changed and doesn't exactly work the way shown in the tutorials. Just a thought....

[weicao]

you are a best teacher I have ever seen, respect from China

[wilfredomendez]

It did worked as instructed, no issues to report, thx.

[lucianooliveira]

app.component.ts

parentNinja = {
name: 'Ryu',
belt: 'Red'
}

app.component.html
<app-home

home.component.ts

@Input() childNinja: string; //not sure if is mandatory to declare string or obj here....

home.component.html
<p>{{childNinja.name}}</p>
<p>{{childNinja.belt}}</p>

[PavlosVasileiadis]

Thank you for another tutorial. Are you going to talk about ngModule now that RC5 is out?

[isagive]

I am so tired of the endless changes by the angular team. Its so hard to learn when everything changes all the time and what you have learned doesnt work a month later.

[muhammadmustafa]

The tutorial helps a lot but the problem is that this is not the final version yet so they keep changing elements.

[kodieivie]

I can confirm angular 6x is working fine with this

[AldrichMascarenhas]

If I'm not mistaken this is now done using the input property for the @Component Decorator?

[felipegarcialopez]

Thanks for this course and this video, I have a problem getting the value of @Input at the class of the componente always returns undefined:

// This component I use inside other component
<main-menu name = "white"></main-menu>

// componente.ts of <main-menu>

@Component({
selector: 'main-menu',

})

export class MenuComponent {
@Input() name: any;
console.log(this.name); // Undefined
}

[BuddhaBit]

If I edit the input variable from the child component, it is updated on the parent component?

[Lwdw]

This doesn't work for me either. Is there an update to the way this is done in the current version of A2? Thanks.

[KLNNNN]

Yeah yeah all good but Ryu's belt is not red

[np]

which version of atom u r using? it has a great file type icons showing

[mirjana]

Thanks again for your tutorials, your teaching style is awesome :) Any chance of releasing a Udemy course on Angular? I would definitely buy it :) Cheers!

[pukka]

Hello everyone,

Updates by ANg2 team is very annoying but still keep up the hope.
To use this input according to the latest version

add it to the home.ts in like this>
@Component({
inputs: ["ninja"],
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})

It will work. Let me know!