Angular 4 Tutorial – Build Single Page App #7
Best Javascript Book :
2nd Javascript Book :
Best Java Book :
Best Angular JS Book:
Best Angular 5 Book:
Donate Us:
Udemy Courses
AutoCAD Course :
Revit Course :
WordPress Course :
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:
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 🙂
Yeah, stay tuned
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
Very well explained tutorial. Thank you sir!
Thank you Awais… I really learn one cool stuff today. I’m new to Angular but you are explaining pretty neat.
thanks 🙂
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)??
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
Thank for your comment 🙂
I don’t think any book would have been written as angular 4 has just launched 2 weeks ago. Angular 4 is 90% same as angular 2, you can learn angular 2 with laravel and use angular 2 code with angular 4 setup/project structure.
After soo many videos on Udemy. This made the most sense to me. Thank you
Thank you, neat explanation, can you upload registration form validation in angular
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.units.push(this.newItem);
this.units.push(this.newLink);
this.newItem = ”;
this.newLink = ”;
}
}
and the view:
x
Really amazing to watch and learn
thank you
very useful and great explanation
Awesome explanation, Thank you
Nice tutorial Sir, thanks for sharing.
great tutorial I like that and now i am learning angular
Thank you it was very helpful!
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.
Exactly !! That’s also a good way of doing it. Thanks Awais.
Ya, thanks for your suggestion. Your are right, it will delete other item. But, without changing removeItem function, we can simply change the click event in case of changing order. Like (click)=”removeItem(items.indexOf(item))”
Thank you ! I know Angular because of you.
Nice Explanation.Thank you.
sir, i never watch these type of explanation excellent and tq sir
the tutorials are good.If i want to get data delayed in some seconds ..What can be the function used ?Any suggestions..