CodeForLife
CodeForLife
  • 11
  • 25 487
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
มุมมอง: 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

ความคิดเห็น

  • @caterinez2572
    @caterinez2572 4 หลายเดือนก่อน

    bro you're literally using below versions of angular, this is not angular 17 :(

  • @rkrohan...1176
    @rkrohan...1176 4 หลายเดือนก่อน

    This is not for Angular 17 ... //Angualar 16 ...

  • @adiyogi1003
    @adiyogi1003 5 หลายเดือนก่อน

    Ths is not angular 17

  • @Aryevang
    @Aryevang 5 หลายเดือนก่อน

    Very good tutorial. Should be better to show the none module way that Angular 17 provides now.

  • @adiyogi1003
    @adiyogi1003 5 หลายเดือนก่อน

    Ths is not angular 17

  • @Mystical_Olivia
    @Mystical_Olivia 5 หลายเดือนก่อน

    Please upload all videos

  • @Devlogowy
    @Devlogowy 5 หลายเดือนก่อน

    Very good tutorial but I think if we cane replace subscribe with signals in @17?

  • @danielamata9514
    @danielamata9514 5 หลายเดือนก่อน

    After this mine remain stuck on installing packages , could be like that for hours why ?

  • @obli98
    @obli98 5 หลายเดือนก่อน

    This is not Angular 17

  • @theparagbagga
    @theparagbagga 5 หลายเดือนก่อน

    This is not angular 17

  • @jurelmobotelhojubotelho8558
    @jurelmobotelhojubotelho8558 6 หลายเดือนก่อน

    Easy explanation! Great.

  • @faribauc
    @faribauc 6 หลายเดือนก่อน

    Your video has no sound :(

  • @maneshwar3468
    @maneshwar3468 6 หลายเดือนก่อน

    Need angular routes without routing module with stand alone components.

  • @tlsolarshop8427
    @tlsolarshop8427 6 หลายเดือนก่อน

    how to create routes.ts in angular 17, help me

  • @juanm6902
    @juanm6902 6 หลายเดือนก่อน

    Oh men, I spend 6 HOURS looking for a way to fix it, thanks bro

  • @user-jz4ew4ij9z
    @user-jz4ew4ij9z 6 หลายเดือนก่อน

    Ye to humy bhi ata agy karwao full Course upload kro

  • @user-zl6tb4rl1s
    @user-zl6tb4rl1s 7 หลายเดือนก่อน

    cool video)

  • @SkyteCode
    @SkyteCode 7 หลายเดือนก่อน

    Thanks man

  • @user-bu9km5mg4u
    @user-bu9km5mg4u 7 หลายเดือนก่อน

    Thanks for those videos, I hope you do not stop.

  • @gautham8720
    @gautham8720 7 หลายเดือนก่อน

    Actually what was the problem with "ng new project_name" ?

  • @gautham8720
    @gautham8720 7 หลายเดือนก่อน

    Hey SuperHero❤️🥵 looking for this whole day.

  • @umahesa5855
    @umahesa5855 7 หลายเดือนก่อน

    Thx man!!! You save my life!!!!

  • @ankitanaha6582
    @ankitanaha6582 7 หลายเดือนก่อน

    Thanks a lot

  • @NandaYKSalunkhe
    @NandaYKSalunkhe 7 หลายเดือนก่อน

    Thank you so much for this video, it helps 👍

  • @rishabhtripathi6032
    @rishabhtripathi6032 7 หลายเดือนก่อน

    thank you so much for this video brother

  • @ayushikhandal4874
    @ayushikhandal4874 7 หลายเดือนก่อน

    thank u bro .... i was so stressed about what's happening but this video saved me!!!!!!!!!!!!😃

  • @TechAA
    @TechAA 7 หลายเดือนก่อน

    u are using the app module file , we need the new using methods of the binding ways

  • @3m-code-Software-Solutions
    @3m-code-Software-Solutions 7 หลายเดือนก่อน

    Thanku so much brother

  • @sanathanicoder
    @sanathanicoder 7 หลายเดือนก่อน

    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.

    • @snoobox
      @snoobox 5 หลายเดือนก่อน

      Where can I find information on how to do this, since the official documentation is not yet updated?

    • @sanathanicoder
      @sanathanicoder 5 หลายเดือนก่อน

      @@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.

  • @Days_of_color
    @Days_of_color 7 หลายเดือนก่อน

    this is angular 16

  • @sagarharale6674
    @sagarharale6674 7 หลายเดือนก่อน

    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...😮‍💨😮‍💨😭

  • @rowaidafalah2762
    @rowaidafalah2762 7 หลายเดือนก่อน

    Thank you so much 🥲because I spend All my day to fix it

  • @guidocs6326
    @guidocs6326 7 หลายเดือนก่อน

    Thanks BROOOOoo

  • @olegg650
    @olegg650 7 หลายเดือนก่อน

    This is not angular 17 !!!!

  • @armanchaudhari6355
    @armanchaudhari6355 7 หลายเดือนก่อน

    Thanku so much brother

  • @vijay139
    @vijay139 7 หลายเดือนก่อน

    Do we need to import/add anything to add routerLink in html page ?

    • @zetalivsanns5360
      @zetalivsanns5360 5 หลายเดือนก่อน

      Import routerlink into typescript page

  • @adityagautam1217
    @adityagautam1217 7 หลายเดือนก่อน

    that's exactly same as older versions like angular version 12, nothing new in angular 17 for routing ??

    • @sanathanicoder
      @sanathanicoder 7 หลายเดือนก่อน

      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.

  • @shaitcarrillo
    @shaitcarrillo 7 หลายเดือนก่อน

    This video, and the following i think, don't have audio, is that right? Great video btw!

  • @CaioCesar-vc7bx
    @CaioCesar-vc7bx 7 หลายเดือนก่อน

    Eu te amo EU TE AMO

  • @malleeshkanna4675
    @malleeshkanna4675 7 หลายเดือนก่อน

    Good Morning Sir ! I suggest you to use new type of for loop

  • @Saadi20000
    @Saadi20000 7 หลายเดือนก่อน

    ❤❤

  • @naijilbenny4133
    @naijilbenny4133 7 หลายเดือนก่อน

    Thank you so much, I literally wasted my whole day because of this error ❤❤

  • @vaibhavchopade7344
    @vaibhavchopade7344 7 หลายเดือนก่อน

    A merge conflicted on path "/newApp/angular.json". i got this error asfter ng new newApp --no-standalone

  • @mrraf6769
    @mrraf6769 7 หลายเดือนก่อน

    So much thanks❤️❤️❤️

  • @mohamedkhalilkhedhri9942
    @mohamedkhalilkhedhri9942 7 หลายเดือนก่อน

    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 ?

  • @techwithneba2332
    @techwithneba2332 7 หลายเดือนก่อน

    Great Job

  • @vaishnavipatil86
    @vaishnavipatil86 7 หลายเดือนก่อน

    I tried this but .ts file Is not showing in my project

  • @user-rt7kw1mn4b
    @user-rt7kw1mn4b 7 หลายเดือนก่อน

    Thank you very much

  • @ahmedshehata8964
    @ahmedshehata8964 7 หลายเดือนก่อน

    thank you a lot i was spending a lot of time to search this issue

  • @fanzo_muciq5464
    @fanzo_muciq5464 8 หลายเดือนก่อน

    I'm spend one day for this problem.i saw your video clear my problem ❤Really thanks you much ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤🎉🎉🎉