- 11
- 25 487
CodeForLife
เข้าร่วมเมื่อ 3 เม.ย. 2021
purely made for programmers, coders
Angular 17: Nested Components, Passing Data from Parent to Child and Child to Parent
Component communication is needed if data needs to be shared between the components
In order to pass data from container/parent component to child component, @Input decorator can be used.
A child component can use @Input decorator on any property type like arrays, objects, etc. making it a data-bound input property.
The parent component can pass value to the data-bound input property when rendering the child within it.
If a child component wants to send data to its parent component, then it must create a property with @Output decorator.
The only method for the child component to pass data to its parent component is through events. The property must be of type EventEmitter
0:00 Nested Components
4:03 Passing Data from Parent to Child(component)
9:59 Passing Data from Child to Parent(component)
#angular
#frontend
#programming
#typescript
#nestedcomponents
In order to pass data from container/parent component to child component, @Input decorator can be used.
A child component can use @Input decorator on any property type like arrays, objects, etc. making it a data-bound input property.
The parent component can pass value to the data-bound input property when rendering the child within it.
If a child component wants to send data to its parent component, then it must create a property with @Output decorator.
The only method for the child component to pass data to its parent component is through events. The property must be of type EventEmitter
0:00 Nested Components
4:03 Passing Data from Parent to Child(component)
9:59 Passing Data from Child to Parent(component)
#angular
#frontend
#programming
#typescript
#nestedcomponents
มุมมอง: 1 651
วีดีโอ
Angular 17: Two Way Binding Beginners Guide
มุมมอง 3.1K7 หลายเดือนก่อน
"Hello there! Let's delve into the powerful concept of two-way binding in Angular, a feature that seamlessly synchronizes data between a model (or component) and its associated view. At the heart of this capability is the [(ngModel)] directive, a versatile tool that combines both property and event binding into a single, concise syntax. Here's how it works: In the component, you define a proper...
Angular 17: Structural Directives Part #4 Custom Directive
มุมมอง 4017 หลายเดือนก่อน
Angular lets us create two kinds of custom directives-attribute or structure directives. Attribute directives let us change how things are rendered in the DOM. Structural directive lets us change DOM layout by adding or removing DOM elements. We can add and remove elements easily with both kinds of directives. #angular #typescript #frontend #programming #coders
Angular 17: Structural Directives Part #3 ngSwitch
มุมมอง 1717 หลายเดือนก่อน
NgSwitch - an attribute directive that changes the behavior of its companion directives. NgSwitchCase - structural directive that adds its element to the DOM when its bound value equals the switch value and removes its bound value when it doesn't equal the switch value. #angular #frontend #typescript
Angular 17: Structural Directives Part #2 ngFor
มุมมอง 4307 หลายเดือนก่อน
To Use ngFor directive, you have to create a block of HTML elements, which can display a single item of the items collection. After that you can use the ngFor directive to tell angular to repeat that block of HTML elements for each item in the list. #angular #typescript #frontend #programming #coders
Angular 17: Structural Directives Part #1 ngIf
มุมมอง 4217 หลายเดือนก่อน
A shorthand form of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an ng-template element. Simple form with shorthand syntax: div *ngIf="condition" Content to render when condition is true #angular #frontend #typescript #a...
Angular 17: Template Expressions and Template Statements
มุมมอง 1837 หลายเดือนก่อน
This video is about how we can implement template expression and template statement in angular 17 #angular #angular_developer #programming #coders #frontend
Getting strated with Angular 17 routes - Beginners guide Part #3
มุมมอง 5938 หลายเดือนก่อน
This video is all about passing the parameter through url #angular #angular_developer #programming #frontend #coders
Getting strated with Angular 17 routes - Beginners guide Part #2
มุมมอง 8218 หลายเดือนก่อน
This video is about the routes used in Angular 17. There are two method we discussing in this video. #angular #angular_developer #angular17 #programming #coders #frontend
Getting started with Angular 17 routing, beginners guide #1
มุมมอง 9K8 หลายเดือนก่อน
This video is about routes which is used in angular application #angular #angular17 #angular_developer #typescript #routes #programming #coders
Need to know when using Angular 17! app.module.ts file missing in file structure.
มุมมอง 8K8 หลายเดือนก่อน
app.module.ts file missing when creating new angular project in 17 #angular #angular_developer #programming #frontend
bro you're literally using below versions of angular, this is not angular 17 :(
This is not for Angular 17 ... //Angualar 16 ...
Ths is not angular 17
Very good tutorial. Should be better to show the none module way that Angular 17 provides now.
Ths is not angular 17
Please upload all videos
Very good tutorial but I think if we cane replace subscribe with signals in @17?
After this mine remain stuck on installing packages , could be like that for hours why ?
This is not Angular 17
This is not angular 17
Easy explanation! Great.
Your video has no sound :(
Need angular routes without routing module with stand alone components.
how to create routes.ts in angular 17, help me
Oh men, I spend 6 HOURS looking for a way to fix it, thanks bro
Ye to humy bhi ata agy karwao full Course upload kro
cool video)
Thanks man
Thanks for those videos, I hope you do not stop.
Actually what was the problem with "ng new project_name" ?
Hey SuperHero❤️🥵 looking for this whole day.
Thx man!!! You save my life!!!!
Thanks a lot
Thank you so much for this video, it helps 👍
thank you so much for this video brother
thank u bro .... i was so stressed about what's happening but this video saved me!!!!!!!!!!!!😃
u are using the app module file , we need the new using methods of the binding ways
Thanku so much brother
Creating a project with --no-standalone flag will create a project with modules which is the same as older default and routing works like in previous versions. In angular 17, standalone components are the default and there is no need for modules. As such route configuration takes place in separate route files and you have to plug it into app config using provideRouter function. Angular 17 is much more modular and uses a plug and play model like react with its standalone component architecture. With standalone components we no longer have to import entire modules. This was introduced with Angular 14 but with 17 this has been made default.
Where can I find information on how to do this, since the official documentation is not yet updated?
@@snoobox There are different versions of angular documentation. Last I checked the stable version ie v.17 of the documentation has all the information about standalone projects. Later versions like rc or next provide information about what is in the development pipeline. It is to ensure that the documentation is always up to date.
this is angular 16
Dude!!!! Thanks man I literally was about to Quit this shit. I Wasted my whole day because of this. Thanks for saving me. You came as a saviour to me. Big Big Thanks...😮💨😮💨😭
Thank you so much 🥲because I spend All my day to fix it
Thanks BROOOOoo
This is not angular 17 !!!!
Thanku so much brother
Do we need to import/add anything to add routerLink in html page ?
Import routerlink into typescript page
that's exactly same as older versions like angular version 12, nothing new in angular 17 for routing ??
Angular 17 made standalone components the default replacing ngModules. Modules will work just as fine in 17 but standalone projects are much more optimized and modular. In angular 17 your route information rests in route files and you have to plug it into the providers array of the app config using the provideRouter function.
This video, and the following i think, don't have audio, is that right? Great video btw!
Eu te amo EU TE AMO
Good Morning Sir ! I suggest you to use new type of for loop
❤❤
Thank you so much, I literally wasted my whole day because of this error ❤❤
A merge conflicted on path "/newApp/angular.json". i got this error asfter ng new newApp --no-standalone
So much thanks❤️❤️❤️
iam new in angular i want to ask you : whene i creat new project there is file automatically created "app.routes.ts" i created my paths and imported the componenets than i imported routes and providerrouter in app.config.ts and i did this export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), provideClientHydration()] }; than i imported routeoutlet in my app.component.ts to use <router-outlet></router-outlet> than i imported RouterLink in my nav to navigate using routes so it works without ngModules iam still learning i dont even know what it is so is the solution i found good or unrecommended ?
Great Job
I tried this but .ts file Is not showing in my project
update npm
Thank you very much
thank you a lot i was spending a lot of time to search this issue
I'm spend one day for this problem.i saw your video clear my problem ❤Really thanks you much ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤🎉🎉🎉
Happy to help