Advanced angular

Advanced
Angular
Tushar Raj
Gaurav Sharma
Krishnan Mudaliar

Copyright © 2019 Talentica Software (I) Pvt Ltd. All rights reserved.
Advanced Templating
• <ng-container>
• <ng-content>
• <ng-template>
2

<ng-container>
• The <ng-container> is a syntax element
recognized by the Angular parser. It's not a
directive, component, class, or interface.
• This element is just a wrapper. It does not get
rendered.
• It is useful in case
a. You don't want to pollute the DOM.
b. You want to use two structural directives in one place.
c. You want to output valid HTML.
3

<ng-content>
• Used for "content projection" :
– projecting content from the parent component into the
designated child component.
• Essentially, it acts as placeholder for dynamic
content.
• Also used to implement the slot pattern
• Use the @ContentChild decorator to query inside
projected content.
4

<ng-template>
• Was earlier called just <template>. Changed
from Angular 4 onwards.
• Used by Angular under the hood for structural
directives like *ngIf and *ngFor
• It holds a template which some other element
can render using the *ngTemplateOutlet
directive.
5

Dependency Injection
• In Angular, the DI framework provides declared
dependencies to a class when that class is
instantiated.
• Dependencies can have other dependencies.
• Dependencies have a hierarchy by default.
6

Dependency injection tokens
• When you configure an injector with a provider,
you associate that provider with a DI token.
• The injector maintains an internal token-
provider map that it references when asked for a
dependency. The token is the key to the map.
7

@Optional
• You can tell Angular that the dependency is
optional by annotating the constructor parameter
with @Optional()
constructor(@Optional() private logger: Logger)
8

@Self
• Tells the DI framework to start dependency
resolution from the local injector.
constructor(@Self() private logger: Logger)
9

@SkipSelf
• Tells the DI framework to start dependency
resolution from the parent injector
constructor(@SkipSelf() private logger: Logger)
10

@Host
• Tells the DI framework to look no further up than
the injecter marked with @Host
constructor(@Host() private logger: Logger)
11

TSPs
• As of Angular 6, angular prefers services to be
tree-shakable.
• The providedIn syntax achieves that.
12

Change Detection Strategy: Default
• What is change detection?
• By default, angular detects the changes in the app
starting from root components, then it’s children and
then grand children, until all the components are
checked. Then all necessary DOM updates are done in
a single batch.
• Any change in any of the application’s component
starts the whole change detection from root
component to all the way down.
• That’s really not a very performant, right?

Change Detection Strategy: OnPush
• Angular offers another change detection strategy:
OnPush.
• It can be defined on any component.
• With this strategy, the component will only be checked
in two cases:
– Reference of Input property changes (immutable)
– An event handler of the component was triggered.

OnPush with Observable
• Any changes made in the subscription of an Observable
will not trigger the change detection.
• To trigger the change detection, the subscription has to be
done in component’s template using the ‘async’ pipe.
• It will trigger the change detection when a new value is
received.

ChangeDetectorRef
• To manually trigger the change detection in angular, inject
ChangeDetectorRef.
• Use markForCheck / detectChanges methods from
ChangeDetectorRef to manually trigger the change
detection.
• detectChanges triggers the change detection only for the
current component and it’s children.
• markForCheck triggers the change detection for the whole
app.

Eager Loading
• By default, angular modules are eagerly loaded, i.e. as
soon as the app loads, all the modules loads too, whether
or not they are immediately necessary.
• Because of this eager loading of modules, the initial
bundle size becomes quite significant, and hence
increases the load time of the application.
• To tackle this problem, angular introduced Lazy Loading.

Lazy Loading
• With Lazy Loading, angular loads a module only when it’s
necessary.
• Since all the modules are not required at the application
load time, so those modules will be excluded from the initial
bundle, and hence decreases the application’s load time.
• Let’s see how to configure Lazy Loading.

Configuring Lazy Loading
• Three main steps to setup the lazy-loaded module:
– Create feature modules (ng g m module-name)
– Create feature module components
– Configure the routes
• PreLoadingStrategy : To load the lazy modules once
the application is loaded.

forRoot vs forChild in RouterModule
• ‘forRoot’ specifies that this is the root routing module for
the application.
• ‘forRoot’ creates a module that contains directives (router-
outlet etc.), registered routes and the router service.
• ‘forChild’ creates a module that only contains directives and
registered routes. It uses the router service created at the
root level itself.
• ‘forRoot’ can be used only once, at the root level.
• Just a heads up, with the new IVY rendering engine, you
can lazy load a component as well.

Workspace in Angular
• A collection of Angular projects (that is, applications and
libraries) that are typically co-located in source control.
• To create an empty angular workspace, use the command
below:
– ng new angular-workspace --create-application=false
• --create-application option can be used to create an empty
workspace (without initial application). By default it is true.
• To add an application to the empty workspace, use the
command below:
– ng generate application admin
– This will create an application named ‘admin’ and update the
‘angular.json’ file as well.

Library in Angular Workspace
• To create a library in the workspace, use the
command below:
– ng generate library library-name
• A library is an angular project which cannot run on it’s
own (unlike angular application). A library must be
imported and use in an app.
• Library can contain modules, components, directives,
pipes, services etc., just like an angular app.
• The main purpose of a library is to keep the reusable
code at one place.
• Build the library before using it in the application.

What, Why and How?
• Basic concept – Scaffolding
• Purpose of Scaffolding – Boilerplate
• Relevance of Schematics – ng g c & @schematics/angular
• Top down approach
– Identify requirement
– Solve problem

What do you see?
Spot the similarities!

A CRUD Admin Portal
The Pattern:
• List of Entities
• Entity – Form window
• Entity Form Validations
• Entity States – Enabled, Disabled, Delete, Save
• Route States – Create, Edit, Delete, Preview
• Related Sub-Entities
My Ultimate Goal?
• Get everything generated using a single command~!

Automate at scale
Schematics

What is Schematics?
• A template-based code generator that supports complex
logic.
• A scaffolding tool, a.k.a. workflow tool.
• Can apply transforms to new or existing project.

What’s the big deal?
• It’s not your regular scripting language, like Bash,
PowerShell
• Run over file system in a Tree
• Transactional
– Do not affect files directly
– Describe transformations on a Tree, then commit
• Angular itself uses Schematics internally.

Creating a new Schematics Project
Install schematics – use to create blank Schematics project
Create a blank schematics project
OR
Create a sample, scaffolded project with some simple, pre-
defined schematics.

Project Structure
• index.ts – Rules
• schema.json – Input
options metadata
• collection.json –
Description of schematics
collections

Rules
• Name of the class
• Camel-case / Pascal-case or Kebab-case the name
• New files
• New comments at top of (or in between) a file
• New import to an existing file
• Change import statement or route variable
• Anything!

Rules – index.ts
• index.ts file exports a function that outputs a Rule
• You can cascade Rules one after the other
• You can chain, revert and commit (actual file update)
Rules

Configuration options – schema.json
• Schema defines the input configuration options
• Default Value
• Prompt
• Format Validation
• Alias – g, c, m
• For a user (developer), they also show up in help:
`ng generate component --help`

Schematics --help

Schematics – collection.json

Project Structure
• index.ts – Rules
• schema.json – Input
options metadata
• collection.json –
Description of schematics
collections
• Run command

How to run Schematics
• npm run build
• schematics .:schema-name --options here
• schematics .:schema-name --options here --dry-
run=false

Scaffold an “Entity Module”

Entity Module Pattern
• Entities List
• Entity Form
• Entity Overview
• Entity Get Started

Let’s see how what all components need to be generated for a
given feature entity in my Angular project.

Let’s see how this can be achieved in the Schematics project.

Scaffold files in Schematics
Transformation Rules:
• __optionName__
• __path__
• __name__
• __name@dasherize__

Let’s see what all need to be “rule-ified” inside files in the Angular project.

Another
Example

The Template File

You did this for all other files in your
module…
 The list component
 The form component
 The overview component
 The entity model class

Build Schematics again: schematics .:em --name=ghost-rider

Run Schematics on actual project
Three ways to do it.
• # Raw technique
ng generate path/to/schematics/src/collection.json:<schema-name> <args> --options
here
• # Local npm registry
npm link path/to/schematics
# go to your Angular app
ng generate <your-schematics>:<schema-name> <args> --options here
• # open-source your Schematics
npm publish <your-schematics>
# go to your Angular app
npm install <your-schematics>
ng generate <your-schematics>:<schema-name> <args> --options here

Run Schematics in my actual Angular application.

Other cool stuffs
• Watch build – `npm run build -w`
• Add tests using karma.js – *.spec.ts
• Build on top of Angular Schematics

When to go for it
• Have an existing solution that contains the code you want
to generate.
• A proper process defined for your application
development.
– Develop your app, identify pattern, then Schematicize!

Beware! When NOT to go for it
• Don’t begin your Angular project starting with a
Schematics project.
• Remember – pattern recognition first!
• Functionality is an Asset. Code is a liability!
– That includes automation of code scaffolding too.
– Why?

Other Live applications of
Schematics
• Angular’s ng generate commands
• RxJS upgrade v4 to v5
• Ngrx commands

There’s so much more
Build on top of Angular’s Schematics
• ng generate component <name>
• Modify on top of component files generated
• Use AST (Abstract Syntax Tree) functions to modify an
existing Tree structure (existing file content)

References
• E-book – https://leanpub.com/angular-schematics
• Live project – https://github.com/manfredsteyer/angular-
crud
• Detailed presentation – Angular Schematics

Questions?

Advanced angular

More Related Content

What's hot

Similar to Advanced angular

Recently uploaded

Advanced angular

Editor's Notes