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

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

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

AppComponent: The Root Component

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.

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

Component’s Example

SIDE-BAR
COMPONENT
< >

SIDE-BAR
COMPONENT
< >
COURSES COMPONENT
< >

SIDE BAR
< >
COURSES
< >
SEARCH BAR < > NAV-BAR < >

SIDE BAR
COMPONENT
< >
COURSES COMPONENT
< >
SEARCH BAR COMPONENT < >HEADER COMPONENT
< >

Components Parent/Tree Structure
App Component
Sidebar Component Courses Component Header Component
Search-bar Component Nav-bar Component

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

Creating a Component

@Component({
……
})
Component
{ }
MyClass Decorator
A simple
TypeScipt Class
Metadata for
the class I am Component

Component
{ }
A simple
TypeScipt Class
Metadata for
the class
+

Demo

Angular App Bootstrapping

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

Why Angular Apps are
Bootstrapped?

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

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

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

More Related Content

What's hot

Viewers also liked

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

More from Edureka!

Recently uploaded

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