3. Agenda
1. Angular 6 Overview.
2. Angular 6 form validation.
Template driven method.
Reactive forms method.
3. Add Angular Material to reactive forms
with validations.
4. Advantages and disadvantages
4. Angular 6 Overview
Released on 4th of May, 2018. Mainly Highlighted new features in
Angular 6:
Angular Command Line Interface (CLI)
The Component Development KIT (CDK)
Angular Material package
5. Angular Elements
1. Angular 6 fully supports to the Element Package.
2. Allow to use Angular components outside of Angular
like in JQuery or VueJS apps.
3. Can create Angular components and publish them as
Web Components, which can then be used in any
HTML page.
6. Component Dev Kit (CDK)
1. Released in December of 2017.
2. Can now build your own library of UI components
without using the Angular Material library.
3. Supports Responsive Web Design layouts.
4. CDK includes the @angular/cdk/overlay package.
7. Command Line Interface (CLI)
Equipped with new commands such as,
ng-update - updates dependencies and code.
ng-add - quickly add application features and supports
to turn applications into progressive web apps.
Allows developers to choose the ng-package for
transpiling different libraries using the Bazel tool.
8. Other Features
Web Pack Update.
Web pack module bundler has been updated to version4.
Ivy: New Rendering Engine
Expects to increase the speed and decreases the size of the
application.
RxJS 6.0Angular 6 now used RxJS 6 internally.
Provide an increase in performance, easier to debug AJAX call
stacks and improve modularity as backward compatible as
possible.
10. Multiple Validators For Your Forms
Angular 6 now allows you to pass multiple
validators to the formBuilder.
No <template> element and now it’s <ng-
tempalate>.
Best Practices!
13. Important Angular CLI
Commands
Create a new project.
ng new validation –routing
Create a new folder and include the required files.
ng g c form-template --spec false
ng g c form-reactive --spec false
Create the compare-validator directive in a shared folder.
ng g d shared/compare-validator --spec false
Run the application locally.
ng serve
14. Template – Driven Form Validation(Demo)
Different form states that can be used to validate a form:
$untouched - The field has not been touched yet
$touched - The field has been touched
$pristine - The field has not been modified yet
$dirty - The field has been modified
$invalid - The field content is not valid
$valid - The field content is valid
15. Template – Driven
Form
Validation(Demo)
1. Create a new folder and include the required files.
ng g c form-template --spec false
2. Import BootstrapCDN in styles.css
@import
url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/
bootstrap.min.css);
3. Create the compare-validator directive.
ng g d shared/compare-validator --spec false
4. Import forms module to your app module.
import { FormsModule } from '@angular/forms’;
5. HTML page implementation.
6. Configure the app-routings.
17. Reactive Form
Validation
(Demo)
1. Create a new folder and include the required
files.
ng g c form-reactive --spec false
2. Import the ReactiveFormsModule to the app
module.
3. Create the Reactive form.
4. Change the template driven form to the
reactive form. <form
[formGroup]="reactiveForm">
5. Modify the validation directive.
6. Apply best practices!
19. Angular Material
UI component library
Help constructing
◦ attractive,
◦ consistent
◦ functional web pages and web applications
Supports modern web design principles like browser
portability, device independence
Create faster, beautiful, and responsive websites.
Inspired by the Google Material Design.
20. What’s new with Angular Material
ANGULAR MATERIAL V6
WAS RELEASED ALONG
SIDE ANGULAR 6.
GOING FORWARD MAJOR
RELEASES WILL BE
ALIGNED WITH ANGULAR.
CDK IS NOW A SEPARATE
LIBRARY
ANGULAR MATERIAL
SCHEMATICS
21. Add Material to
an existing
project (Demo)
Install Angular Material using CDK
◦ This will help you quickly add Material to
a project
◦ Ensure project dependencies in
package.json
◦ Ensure project dependencies in your app
module
◦ Adds Prebuilt or Setup Custom Theme
◦ Adds Roboto fonts to your index.html
◦ Apply simple CSS reset to body
Using starter components
25. PROS
With Angular Material you get pre-built
components
Seamless updates using Angular CLI
Powerful ecosystem
CONS
Steep learning curve
Documentation is lacking details
27. Find the Code
Repository location of Angular 6 form validations
https://github.com/SacheeCG/DevForumAngular6FormVali
dation
Repository location of Angular 6 form validations with
Angular Material.
https://github.com/SacheeCG/DevForumANgular6FormVali
dationwithAngularMaterial
All three are shipped as part of Angular 6, not separate updates.
This version release is more focused on the tooling and support rather than the whole framework.
Turning a component into a custom element gives you an easy path for creating dynamic HTML content for your Angular app, and, using the Angular Elements package, it is even easier to create native custom elements.
1. The Angular Team has made some really neat improvements to it for the 6th version.
2. So you don't have to use other libraries like Flex Layout or even learn using the CSS Grid. It covers them all.
3. This one has a new positioning logic that makes your pop-ups stay on screen very brilliantly.
Without the Bazel tool, you would have to build and package libraries yourself.
Ivy: This important feature is not completely released in Angular 6 since it is in experimental mode; except the complete version in Angular's next release.
All services of the application as well as those of libraries have always been bundled – regardless of whether they were used or not.
Tree shaking is a build optimization step which tries to ensure any unused code does not get used in our final bundle.
The <template> element was depreciated one year ago when Angular 4 was launched.
A public content delivery network. Users of BootstrapCDN can load CSS, JavaScript and images remotely, from its servers
Ivy: This important feature is not completely released in Angular 6 since it is in experimental mode; except the complete version in Angular's next release.