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.

1. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Edureka
Free Angular Course For Beginner

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
AppComponent: The Root Component

4. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
AppComponent: The Root Component

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What are Components?

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example

9. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example

10. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE-BAR
COMPONENT
< >

11. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE-BAR
COMPONENT
< >
COURSES COMPONENT
< >

12. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example
SIDE BAR
< >
COURSES
< >
SEARCH BAR < > NAV-BAR < >

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. 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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Component’s Example

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Creating a Component

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Creating a Component
Component
{ }
A simple
TypeScipt Class
Metadata for
the class
+

20. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Demo

21. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Angular App Bootstrapping

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. Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why Angular Apps are
Bootstrapped?

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