If you use *ngFor for tag, code should be : content content2 ... ... This is wrong usage. True usage, you should use *ngFor for tag, and code should be: content content content ...
Just a question. Why don't we make use of the parent-child component interaction method for this specific use case? For example, we can have a EmployeeComponent which will hold the data and add two different child components (EmployeeDetail, EmployeeList) and then pass the data. I believe that is how React does it by sending the props.
Nested Hierarchy: If your application has a deep component hierarchy, passing data through multiple levels of components using @Input and @Output can become cumbersome and result in complex and less maintainable code. Tight Coupling: Components become tightly coupled, making it harder to reuse them in different parts of the application. Service based approach-Loose Coupling: Services provide a way to decouple components. Components don't need to know about each other; they only need to know about the service. This promotes a more modular and maintainable codebase. Easier to Scale: When dealing with complex data sharing scenarios or scenarios where components are not directly related, services provide a scalable solution. Services can act as a centralized place for managing and sharing data across multiple components.
Thank you very much for your greate tutorial!; My question: for accessing the array employees in class of employee-list.component.ts in employee-detail.component.ts, why don't we use extends keyword? (EmployeeDetailComponent extends EmployeeListComponent)?
Your tutorials are just lit💥 good explanation , I have a doubt why we can't use component interaction here in case of sending array from one component to other.
I guess @Input and @Output used for interaction between Parent and Child components. But here those two are separate components without any relation between them.
Why test component decorator had .app-test as selector but for employee-list component when the selector is .app-employee-list angular is not working but when changed it to employee-list it is working why is that?
clear explanation and I can understand the concept.......but I was confused about ,Providers ,resolve and Promise is that an angular concept ...anyone help please
Well, in future developer might want to remove only detailed information about employees. In our case, he'd just remove tag from app.component.html. The other case is - imagine, that this is a big open source project. And some day one good developer wanted to contribute to this project and made a much more cooler employee-detail component with whistles and other stuff. So, all we need to do is remove folder with old component and paste new (or git merge or whatever you like) - it'll be as easy as pie. The main principle of angular - is this modularity
app.module.ts you must import file EmployeeListComponent and EmployeeDetailComponent and register in declarations at @ngModule example *import { EmployeeListComponent } from './employee-list/employee-list.component';* *import { EmployeeDetailComponent } from './employee-detail/* @NgModule({ declarations: [ AppComponent, *EmployeeListComponent,* *EmployeeDetailComponent* ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] })
It is an arbitary value that represents the value of one item in the array in each iteration. You can even have 'item' instead of 'employee'. You can call it anything you want :)
I'm impressed on how things flow from one video to the next. Very well done!
If you use *ngFor for tag, code should be :
content
content2
...
...
This is wrong usage. True usage, you should use *ngFor for tag, and code should be:
content
content
content
...
+1 This is true!
your whole angular series ,its just soo squeaky clean explanation .very helpful for beginner and interview purpose.
Thank you my Indian teacher, keep up the good work!
Just a question. Why don't we make use of the parent-child component interaction method for this specific use case? For example, we can have a EmployeeComponent which will hold the data and add two different child components (EmployeeDetail, EmployeeList) and then pass the data. I believe that is how React does it by sending the props.
Nested Hierarchy: If your application has a deep component hierarchy, passing data through multiple levels of components using @Input and @Output can become cumbersome and result in complex and less maintainable code.
Tight Coupling: Components become tightly coupled, making it harder to reuse them in different parts of the application.
Service based approach-Loose Coupling: Services provide a way to decouple components. Components don't need to know about each other; they only need to know about the service. This promotes a more modular and maintainable codebase.
Easier to Scale: When dealing with complex data sharing scenarios or scenarios where components are not directly related, services provide a scalable solution. Services can act as a centralized place for managing and sharing data across multiple components.
Thanks is not enough to say! You are simply superb sir and so far you might had saved many lives, like mine!!! Thank you!!!!Thanks a lot..!!!
i'm so lucky to find a tutoriel like this, thank you Professor.
count me too!
Fantastic. Such a great teacher!
best tutorials for angular thank you vishwas for this wonderful tutorial
Thank you very much for your greate tutorial!;
My question: for accessing the array employees in class of employee-list.component.ts in employee-detail.component.ts, why don't we use extends keyword? (EmployeeDetailComponent extends EmployeeListComponent)?
I want that employees name starts with s only what should I do for this
U r such an amazing tutor sir🔥💯
Hatsoff to u sir!!🙂❤️
Really helpful, short course but much effective. Thanks Codevolution !
Thanks you helped ne a lot 👏👏finally i understood the difference service and component❤️❤️❤️
What a great teacher.thankyou so much for this
Your tutorial is great to kickstart with and angular.
*ngFor should be for element for for . I thought so..
*ngFor is used inside element .
ex-
{{employee.name}}
Your tutorials are just lit💥 good explanation , I have a doubt why we can't use component interaction here in case of sending array from one component to other.
this is services tutorial. he wanted to implement services so he didnt use component interaction
great video...very easy to understand , Thanks u sir.
Hey there, excellent tutorials. I have a question, why don't we pass it as we did in the Input decorator type
I guess @Input and @Output used for interaction between Parent and Child components. But here those two are separate components without any relation between them.
really u are a angular god
awesome tutorial..thanks keep doing your good work.
I have a doubt why some components are added in declarations array and some are in imports in appmodule.ts file
Great explanation! Thank you
Why test component decorator had .app-test as selector but for employee-list component when the selector is .app-employee-list angular is not working but when changed it to employee-list it is working why is that?
are there latest version tutorials available
clear explanation and I can understand the concept.......but I was confused about ,Providers ,resolve and Promise is that an angular concept ...anyone help please
thats a pure js look into it
Thanks! Great videos!
why you didn't create a employee detail in old components.....
what is the need to create a new components
Well, in future developer might want to remove only detailed information about employees. In our case, he'd just remove tag from app.component.html.
The other case is - imagine, that this is a big open source project. And some day one good developer wanted to contribute to this project and made a much more cooler employee-detail component with whistles and other stuff. So, all we need to do is remove folder with old component and paste new (or git merge or whatever you like) - it'll be as easy as pie.
The main principle of angular - is this modularity
Superb
Good tutorial. Thanks!
thank you so so much !!! its very very helpful !!! thanks alot Sir!!!
very helpful Thank you
Awesome work indeed...
Facing problem in "app.module.ts" file. Some issue with the tag,browser is not showing anything.Please help
app.module.ts you must import file EmployeeListComponent and EmployeeDetailComponent and register in declarations at @ngModule example
*import { EmployeeListComponent } from './employee-list/employee-list.component';*
*import { EmployeeDetailComponent } from './employee-detail/*
@NgModule({
declarations: [
AppComponent,
*EmployeeListComponent,*
*EmployeeDetailComponent*
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
Solid video!
Angular 8 just got released now and this video is 2 years old
You are a hero
getting the following error:
ERROR in ./src/app/employee-list/employee-list.component.ts
Module not found: Error: Can't resolve './
Employee List
{{employee.name}}
' in 'C:\Users\ChaseOfSpades\Documents\Angular\EmployeeList\src\app\employee-list'
any help would be greatly appreciated.
Figured it out. The tag for my template was templateUrl, not template.
The error has occurred?????
Nice tutorial................
Thank you..
thank you
watching this utub vid is TRAINING from our company
from where you get ""employee"" of *ngFor="let employee of employees" ?
It is an arbitary value that represents the value of one item in the array in each iteration. You can even have 'item' instead of 'employee'. You can call it anything you want :)
VERY HELPFUL
Your tutorials helping me a lot :)
I am not able to load employee component in the app module so If any body can brief me about that it would be great for me.
Im having the same problem
same problem
I'm facing the same problem now, can someone please help!!
thank you sir
awesome thanks
5 star
SFDC batch3 hi 😂
4:00
valla billa azına caktım valla billa
awesome tutorial..thanks keep doing your good work.