Angular 4 Tutorial - Build Single Page App #7

Udemy Courses

What's new in angular 4? Angular 4 has been enhanced with features to create single page web apps. Lets learn, how to bind data, how to add click event in angular 4, how to file ngFor index in angular 4.

Angular 4 for beginners.

Single page app with angular js:

Want to learn Angular JS 1?

Join facebook group:

[-andymel]

0:00 About the page he builds in this tutorial

02:08 The necessary html

04:40 css for the layout

11:06 TypeScript code

15:02 Two way data binding with [(ngModel)]

17:13 Run code on click event

18:36 Explanation of how the app works again

19:56 Add click event to remove items

22:15 Get the index of an entry in ngFor

24:29 Running the full app

[sskdev]

After soo many videos on Udemy. This made the most sense to me. Thank you

[saruncse]

Thank you Awais... I really learn one cool stuff today. I'm new to Angular but you are explaining pretty neat.

[ramanjaneyuluboya]

Thank you, neat explanation, can you upload registration form validation in angular

[raveendragorrepati]

sir, i never watch these type of explanation excellent and tq sir

[jacklyons]

Thank you! This is perfect for building confidence with Angular, please can you create more short videos like this where you build something small and demonstrate angular's key features :)

[anglikai]

Thank you ! I know Angular because of you.

[ajaydubey]

great tutorial I like that and now i am learning angular

[nunesubbu]

Thank its a cool stuff....Ihave learnt about a app and tsl int rules

[jeetadhikari]

Its better to send the whole item as a parameter while removing an item from *ngFor. like
(click)=removeItem(i) instead of (click)=removeItem(ind) in this case (writing the reason below)

and write the function as:
removeItem = function(anyname){
this.items.splice(this.items.indexOf(anyname), 1);
}

Reason:
I suggest this because sometime we might also use ordering filters in *ngFor repeats. So at that time the index of the row changes and it deletes some other item which we are not expecting to be deleted. Feel free to correct me if I am wrong.

and Thanks a lot for sharing your Knowledge Sir, your videos are of great help.

Regards.

[augustosotelo]

Hello, great work!,
Just yesterday was learning about AngularJS and for my surprice the version 4 was release to public a few days ago and thanks to your videos learned the basics, thank you very much to take the time to create this videos tutorials.

I was wondering, can you create a video about how to integrate and use AngularJS4 into Laravel 5 (or Lumen 5) or maybe you can recomend a book about that?

Thanks in advanced,

AugustoSL

[ramtej]

Hi Awais...I appreciate you for the wonderful work. I have a doubt in this tutorial. Using of " *ngFor " in code is resulting in few errors. May i know why?(It is said that ngfor is not working in angular 4 by some sites)??

[naziknassar]

Very well explained tutorial. Thank you sir!

[MrAndykofi]

Nice tutorial Sir, thanks for sharing.

[asmazabin]

awesome tutorial..
and easy way to understand angular4.
this Single Page App available on github?

[shilpasorganvi]

imports: [

FormsModule] Add FormsMOdule in app.module.ts

[longboardcreator]

hey, how would you save and push the info from 2 input fields? I am trying to define an object with 2 properties

edit: i am trying this, however, i does not seem like it is pushing to the array correctly since it shows up as two separate list items

units = [
{
newLink: '',
newItem: ''
},
];

newItem = 'hello';
newLink = 'hi';

pushItem = function () {
if (this.newItem != '' && this.newLink != '') {


this.newItem = '';
this.newLink = '';
}
}


and the view:

<div class="addItem">
<!--this is the name input button-->
<input [(ngModel)]='newItem' placeholder='Add Item' type="text" class='addField'>

<!--input for the link-->
<input [(ngModel)]='newLink' type="text" placeholder="add link" class='addField'>

<button
</div>
<ul>
<li *ngFor = 'let u of units; let uni = index'>
{{u}}
<span
</li>
</ul>

[KAOPro]

thank you
very useful and great explanation

[nirajchavan]

@NgModule({
imports: [
FormsModule
],

Add this to your app.module.ts file otherwise it will show ngModel bind error.

[luurao]

"removeItem function" gets the page's choice into error, no problem for everyone but me?