Angular 4
Shristi Technology Labs
1
Contents
• Overview of Angular 4
• Angular4 architecture
• Understanding typescript
• Modules
• Components
• Directives
• Databinding
• UserInput
2
Overview of Angular 4
• Angular is a javascript framework for developing single
page applications
• Angular4 is build using typescript.
3
Angular4 Architecture
4
Architecture
Modules
• Used to break up application into logical pieces of code
Components
• Similar to class
Service
• Set of codes shared by different Components of application.
Template
• Define view of angular js
Directive
• To modify DOM element and extend their behaviour.
5
Install angular using Angular CLI
Prerequisites
• Node and npm should be installed
Install Angular CLI from command prompt
• Install angular-cli globally npm install –g @angular/cli
• Check CLI installation ng –v
Create a new Project
• To create a new project ng new my-project
• To check angular version, navigate to project folder and type ng –v
Run the application
• To run the application ng serve
• To run the application and open in browser ng serve --open
6
Typescript
• Superset of javascript.
• Optional static typing.
• Class-based object oriented programming.
• Angular2 is written in typescript.
7
Building blocks of Angular
• Building blocks of angular
• Classes
8
Modules
• Provides logical boundary to applications.
• app.module.ts file should be present in the src folder
• app.module.ts is the root module.
9
Modules
• Logical division of the code.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule ({
imports: [ BrowserModule ], Import
declarations: [ AppComponent ], Bootstrap array array
bootstrap: [ AppComponent ]
})
export class AppModule { } Export array
10
Modules
Bootstrap Array
• Contains components need to be loaded so that they can be used in
application.
• Declare those components so that they can be used across other
components in the Angular JS application.
Import array
• Imports functionality from other angular js modules.
Export array
• Exports components directives and pipes which can be used in
other modules.
11
Components
• Every angular project has atleast one component called root component.
• Single web page is composed of one or more reusable components
• app.component.ts is the default component present during creation of
angular project.
• Components are classes decorated with Component Decorator
• Each component has a template which can communicate with the code in
the component class
12
Example Reusable components
Header
Image 1 Description
Main Page
Side bar
Image 2 Description
Components
13
Component
• Create component in app folder with xxxComponent.ts
export class Sample{
courseName : string; Attributes
setCourse(value){
..
} Methods
}
14
app.component.ts
Selector - tag name
templateUrl - the page that
will be displayed upon calling
the component
styleUrls - the stylesheet for
the component
15
Create a component
• To create a component use - ng g component <component-name>
16
Example
sample.component.ts
sample.component.html
17
Interpolation
• Double curly braces
• The text between the braces
– Can be the name of a
component property.
– Can be template expression
• Angular evaluates the expression
and then converts expression
results to strings
sample.component.ts
sample.component.html
18
Templating - Inline
Templates helps to define the
UI of the app
• Inline
• External
19
Directive
• A directive is a custom HTML element that is used to extend the
power of HTML
Directive
Structural Attribute
Component
directive directive
20
Structural Directive
• Responsible for html layout.
• Shape and reshape DOM element.
• Identified by * symbol.
Built-in structural directive
• NgIf
• NgFor
• NgSwitch
21
NgIf
• It takes a boolean
expression
• Makes an entire
chunk of the DOM
appear or
disappear.
• Doesn't hide
elements with CSS.
• Adds and removes
physically from the
DOM.
22
NgFor
• Iterate items in template.
• Run as a loop in collection.
• Bind data in html template.
• Anything changes in collection ,
the template recreates and
changes the DOM.
23
Using a class for data
• To create a class use ng g class <class-name>
24
NgFor - with array of objects
25
Attribute Directive
• Changes appearance and behaviour of DOM element, component
or any other directive.
• Used as attributes of elements.
Inbuilt directives
• NgClass - add and remove a set of CSS classes
• NgStyle - add and remove a set of HTML styles
• NgModel - two-way data binding to an HTML form element
26
NgClass
• NgClass directive allows to set the CSS class dynamically for a DOM
element.
• It controls how elements appear by adding and removing CSS classes
dynamically.
• Set value by passing object literal to the directive
• Can bind CSS classes that are using string array and object to NgClass
27
NgClass with String
• To bind the CSS class to NgClass, create a string and refer to CSS class
names enclosed by single quote (').and separated by space
output
28
NgClass with Array
• To bind array of CSS classes to NgClass with array of CSS classes, create
an array with the CSS classes
output
29
NgClass with Object
• To bind an Object using { } toNgClass, where the object is the key value pair
• The key is the CSS class name and the value is an expression that returns
Boolean value.
• The CSS will be added at run time in HTML element only when if expression
will return true.
• If expression returns false then the respective CSS class will not be added.
output
30
NgStyle
• NgStyle directive is used to set inline styles for the DOM elements.
• Set styles using the NgStyle directive and assign it to an object literal
• Is more useful when the value is dynamic.
• The values in the object literal can be javascript expressions - they are evaluated
and the result is used as the value of the css property
31
NgStyle
output
32
Event Binding
33
Summary
• Overview of angular4
• Angular4 architecture
• Understanding typescript
• Modules
• Components
• Directives
• Databinding
• UserInput
34
Thank You
35
