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