Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka

This Angular 4 tutorial will introduce you to angular 4 components.

To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg.

Related Books

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

Angular 4 Components | Angular 4 Tutorial For Beginners | Learn Angular 4 | Edureka

  1. 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Free Angular Course For Beginner
  2. 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Tutorial - Road Covered So Far Angular Introduction Angular Install & Project Structure Angular Components Angular Data Binding Angular Directives Angular & angularFirebase Angular CRUD App Angular Services Angular Forms Angular Routing 1 10 9 8 7 6 1 2 3 4 5 678910
  3. 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. AppComponent: The Root Component
  4. 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. AppComponent: The Root Component
  5. 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Key Points: ❖ index.html is the file that is served by the server and gets rendered in the browser ❖ index.html links the styles and other javascript files which are required for running the app ❖ AppComponent is the root component which gets loaded first. ❖ Typically, all of the other custom components are nested inside AppComponent. ❖ AppComponent is inserted in the body of index.html using custom “app-root” element ❖ Selector tag is used to load a component’s instance.
  6. 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components?
  7. 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components? “A component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.”
  8. 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
  9. 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
  10. 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE-BAR COMPONENT < >
  11. 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE-BAR COMPONENT < > COURSES COMPONENT < >
  12. 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE BAR < > COURSES < > SEARCH BAR < > NAV-BAR < >
  13. 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example SIDE BAR COMPONENT < > COURSES COMPONENT < > SEARCH BAR COMPONENT < >HEADER COMPONENT < >
  14. 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Components Parent/Tree Structure App Component Sidebar Component Courses Component Header Component Search-bar Component Nav-bar Component
  15. 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Component’s Example
  16. 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What are Components? Template or View Component < > “A component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.” Business Logic
  17. 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component
  18. 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component @Component({ …… }) Component { } MyClass Decorator A simple TypeScipt Class Metadata for the class I am Component
  19. 19. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating a Component Component { } A simple TypeScipt Class Metadata for the class +
  20. 20. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Demo
  21. 21. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular App Bootstrapping
  22. 22. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular App Bootstraping main.ts AppModule AppComponent bootstraps bootstraps 1 2 ❖ Main TypeScripts file from where the execution begins ❖ Initializes the platform browser where the app will run and bootstraps AppModule ❖ Root Module of the angular app ❖ Bootstraps AppComponent and inserts it into the index.html host web page ❖ Root Component under which other components are nested ❖ First component to be inserted into the browser DOM
  23. 23. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why Angular Apps are Bootstrapped?
  24. 24. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why Angular Apps are Bootstrapped? ANGULAR is NOT a FRAMEWORK for creating WEB-ONLY APPLICATIONS ❖ Allows us to write angular app that can be hosted on other environments. ❖ Import the platform based on the environment. ❖ For example: @angular/platform-browser-dynamic is used for running the app on browsers

×