$ sudo npm install -g @angular/cli
Note: You need node version 20.11.1 to install angular.
Do the following:
$ nvm install v20.11.1 to install and use v20.11.1, which will take care of the EBADENGING warnings on npm install.

$ ng --version

$ ng new hello-world

1. Which stylesheet format would you like to use? CSS
2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No [???No idea if this is right]

npm install http-server -g
http-server

e2e: End to end tests. This is the directory where we write our tests for angular.

One module ie: app.module.ts, and one component: app.component.ts

Typically they are placed in the app/environments folder

Typically, src/environments

src/main.ts

Place the name of the main module (usually AppModule.ts) inside the main.ts file.
platformBrowserDynamic() bootstrapModule(AppModule);

In main.ts:
if (environment.production) { enableProdMode(); }

A build automation tool.

It takes all of our scripts, stylesheets, combines them in a bundle and then minifies the bundle for optimization.

It takes all the scripts to fill the gap between the version of javascript that angular needs and the version of javascript that most browsers need.

All of your source code

All of your styles files

All of the libraries from 3rd party vendors included in your project.

They're included within the script tags of your index.html file. This happens at runtime, so you won't see this in your index.html within your source directory.

1. AngularJS
   The first version, written in 2009, is javascript-based.
2. Angular 2
   Released in September 2016, this version was a complete rewrite of AngularJS and was written entirely in TypeScript. It was mobile-oriented and offered more language choices.
3. Angular 4
   This version was an improvement on Angular 2 and was backward compatible with it. Consider it Angular 2.4 - to update the router library to the same version number.
4. Angular 7
   Released in October 2018, this version focused on the Ivy project, which made it easier for developers to create single-page applications.
5. Angular 10
   Released in June 2020, this version increased the minimum TypeScript capability to 3.9 and added a date range picker. It also improved application performance and browser compatibility.
6. Angular 11
   Released at the end of 2020.
7. Angular 12
   Released in 2021.
8. Angular 13
   Released in November 2021, this version included new features and changes, such as:
   
   • Ivy-based features and optimizations
   • End of IE11 support
   • Improvements to Angular CLI
   • Framework changes and dependency updates
   • Improvements to Angular Tests
9. Angular 15
   Released in November 2022, this version included stable standalone APIs, which allowed developers to build apps without Ng Modules.
10. Angular 16
    Released in May 2023
11. Angular 17
    Released in November 2023

Presentation Logic

No! You need to install typescript.

$ sudo npm install -g typescript

$ tsc --version or by running the typescript server: $ ng serve to transpile all of our typescript files.

$ tsc main.ts

$ ng serve will automatically transpile code

After the code has been transpiled, you can run it using the js file with $ node < fileName >.js

var: scoped outside of the block where it is declared in.
let: scoped inside only of the block where it is declared.
const: it doesn't actually mention const scope.

enum Color { Red, Green, Blue, Purple }
The values of Red, Green, etc. are automatically assigned the index of the element as though it were an array where Red = 0; Green = 1; etc.

enum Color { Red = 'Red', Green = 'Green' };
let backgroundColor = Color.Red // "Red"

The same as type casting however we use angle brackets to assert the type: <string> i.e.:
let message;
message = 'abc';
let endsWithC = (<string>message).endsWith('c');
or
let alternativeWay = (message as string).endsWith('c'); At the very end of the chapter: Note - with this alternative way we are not changing the type of the variable at runtime, just helping intellisense understand what type of variable it is.

1. cd to a directory that is not an angular project directory (has no node modules)
2. Create a main.ts file and insert your angular code in it.
3. In a terminal, run: tsc main.ts && node main.js

An interface defines the shape of an object. This helps intellisense help you understand the form of parameters and assignments.

Where you define the type of the variable inline. i.e.:
const drawPoint = (point: { x: number, y: number} ) { //... }

Define an interface. i.e.:
interface Point {
x: number, y: number } let drawPoint = (point: point) => { //...}

Always use the first letter as a capital: i.e.: Point

Yes!

                                
interface Point {
    x: number,
    y: number,
    draw: () => void;
}
                                

No!

                                
interface Point {
    x: number,
    y: number,
    draw: () => void;
}
                                

Cohesion principle. To adhere to the cohesion principle these functions should all be encapsulated in a class. Then we have both SRP and Cohesion principles. Additionally, Modules have cohesion principles. Modules should have one, and only one responsibility.

Just the name of the method and any EXTERNAL parameters. Methods can use any internally set fields. i.e.:

class Point {
    x: number;
    y: number;

    draw() { uses x and y within the method.  Note, no function or arrow function declarations.  This is a method within a class.}
}
                                

An object is an instance of a class. i.e.:
class Point { x: number; y: number; draw() => void; getDistance(another: Point) { // ... } } let point = new Point(); // point is now the new instance of the Point object.

let point:Point; has not allocated any space in memory for the custom "type" -- our class.

class Point {
    x: number;
    y: number;
    
    draw() => console.log('X: ', this.x,  'Y:', this.y)
    
    getDistance(another: Point) {
        // ...
    }
}
    
let point:Point;
                                                              
                                

The same way you make them optional in typescript. With a "?".
constructor (x?: number, y?: number)

A keyword to control the use of the field, property or function. i.e.:

class Point {
    private x: number;
    private y: number;
    
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    
      
    public draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
    
    getDistance(another: Point) {
        // ...
    }
}
     
let point = new Point();
                                
                                

Either declare the field with the access modifier or precede the constructor param with public or private access modifiers

 class Point {
    private z: number;

    constructor(private x:number, private y:number, z:number) {
        // variables x and y are automatically declared; No need to add them to
        // field declarations as in z above.
        this.z = z;
    }
}
                            

public

Most people confuse the two, calling properties fields. In actuality, a field is declare like a var with or without access modifiers. A property is the fence between public access of the field value. For instance:
A field:
private x:number; A property:

    get x() {
        return this._x  //notice you've renamed the field to _x to make the getter or setter function more intuitive
    }
                            

let x = point.x;

point.x = 10;

Use setters and getters:
get x() {
return this._x
}

set x(val) {
if (x > 0) {
this._x = val;
}
}


Then call it using:
point.x = 10;
let myx = point.x

Unlike fields, properties can assign or retrieve the field values by calling the getter or setter methods:
WRONG: point.set x(10)
CORRECT: point.x = 10;

Typescript modules differ from Angular's definition of modules. From typescript's point of view, any .ts file that has exported classes, functions, single variables, or objects is a module.

Data, HTML Template, Logic

App component

A module is a container for a group of related components. Every angular app has at least one module, called app module.

• Create a component.
• Register the component in a module.
• Add an element in an HTML markup

<name>.component.ts - i.e.: "courses-math.component.ts"

• import { Component } from '@angular/core';
• Add the decorator, called like a function which takes an object, specifying how this component will be called and rendered: @Component()

import { Component } from '@angular/core';

@Component({
    selector: 'courses',  // to be used wherever <courses> is used in the markup;
    template: '
Courses
'
})
export class CoursesComponent {
}
                            

1. Use an external template, specifying it in your @Component:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']

})
                                

@Component({
    selector:'app-root',
    template:  '<h2>Hello!</h2>'
})
                                

$ ng g c mycomponent // g = generate; c = component;

src/app/course/mycomponent.component.css
src/app/course/mycomponent.html
src/app/course/mycomponent.spec.ts

... then it updates src/app/app.module.ts

Question: What if you're in a complex tree and your module is up two levels, where app module is up four levels? What does it update ... app.module.ts or the module up next.

It renders content dynamically.i.e.:

@Component({
        selector: 'courses',
        template: '
{{ title }} 
'
})
export class CoursesComponent {
        title = "List of courses";
}

Immediately.

No. You need to change ' ' to ` `. Then your code can be written more clearly spanning multiple lines.

To manipulate the dom. i.e.:

<ul>
        <li *ngFor=""></li>
<ul></p>
                                

This is used whenever you're going to modify the contents of the DOM.

<li *ngFor="let course of courses"></li>. // here courses is an array of courses.

{{ courseName }}: Double braces;

No. A service is just a typescript class.

export class CoursesService {
        getCourses() {
            return [ "math", "english", "civics" ]
    }
}
                                

courses.service.ts

1. import the service
2. Write a constructor for your component. Inside the constructor, declare the service object.

i.e.:

export class CoursesComponent {
        title = "List of courses";

    constructor () {
            let service = new CoursesService(); // initialize the service
            this.courses = service.getCourses();  // set our field to the value returned from the service.
    }
}

Because that way you tightly couple the CoursesService to the CoursesComponent.  If you change the CoursesService constructor to take parameters you need to go back to each place you instanciated the CoursesService and modify the argument list.

Use dependency injection.

1. In the constructor of the component where you want to use the dependency:
constructor (service:CoursesService) { ... };

2. In the module where the component is registered, you must update the module to tell Angular that the components in this module have dependencies:
@NgModule({ ... providers: [CoursesService], ...})

ERROR Error: No provider for CoursesService!

In addition, you won't see the courses in the browser.

No. This is a Singleton pattern. One instance of the provider will be instantiated for ALL of the components.

$ ng g s <serviceName> // g for generate; s for service;

1. src/app/email.service.spec.ts
2. src/app/email.service.ts

Only when that service takes arguments.

Data, HTML Template, Logic

Basically interpolation and property binding do the same thing. However, interpolation cannot change any property other than the innerHTML, outerHTML, innerText or outerText
With property binding you can bind any html property. i.e. in pseudo code:
if (doNotDisplay) then <h2 [display]="hidden">HELLO THERE!</h2<

Also with property binding you can use complex operations to generate displays.

Ref:

No. PropertyBindings and Interpolation strings are called 1-way bindings because they bind to the DOM, but the DOM does not communicate back if their values change.

< table >
    < tr >
        < td  [colspan]="colSpan" >
    </tr >
 < /table >

No! For example, in the DOM, < h1 [textContent]="title" >< /h1 > the textContent property does not exist in HTML.

You need to know the object name in the DOM first. For instance, "style".

1. Anything shown in the elements tab of dev tools is what is in the dom. To see the properties of the element, go to the console tab and use something like getElementById, then inspect the element.
2. 0:41: Google "dom style properties" or the html attribute name to see the properties available to that attribute in the DOM.

<td [attr.colspan]="colSpan"> : Now you've added an attribute to the DOM which didn't exist there before.

1. $ npm install bootstrap --save The first thing it does is downloads bootstrap and stores in your node_modules folder, and the --save adds bootstrap as a dependency in your package.json file.
2. Go into your style.css folder and import bootstrap from node_modules: @import "bootstrap/dist/css/bootstrap.css"

Use the [] property binding: < button class="btn btn-primary" [class.active]="isActive">

Google "dom style object properties". This would also give you a hint at what properties are available on the DOM if you get a compilation error.

Rather than "style="background-color: black"", you need to use attribute binding for the DOM:
<button [style.backgroundColor]="isActive ? 'blue' : 'white':

Here you're setting a DOM property. You need to do this with property binding:
<button [style.backgroundColor]="isActive ? 'blue' : 'white'"></button>

Almost identically to the way you handle it in HTML.
<button (click)="onSave()">Save</button>

Then, in your class, you write a function called "onSave".

Pass in to the click call $event:
<button (click)="onSave($event)">Save</button>

Then in your class, you write your function "onSave($event)"

If you have a click event on any parent element, the click event will bubble up to all click events until the event has bubbled up to the top. This is why stopPropagation is so important to use.

<div click="() => console.log(`div was clicked`)"; />
<button click="() => console.log(`button was clicked`)"; > Click Here < /button>
                        

1. pass the $event into the event handler call.
2. within the event handler, use the $event to stop propagation:
$event.stopPropagation();

<input (keyup.enter)="onKeyUp()" />

onKeyUp() {
    console.log("ENTER was pressed.");
}
                                

Within the element, declare the variable #email, then pass that variable back to your component on the event binding:

<input #email (keyup.enter)="onKeyUp(email.value)" />
                                
onKeyUp(email) {
    console.log(email); // mary@marylark.com
 }

 <input (keyup.enter)="onKeyUp()" />
                
export class ComponentClass() {
    email = "mary@marylark.com"

    onKeyUp() {
        console.log(this.email); // mary@marylark.com
    }
}

Banana in a box : used for two way bindings within templates.

1. You haven't bound it to ngModel,
2. You haven't made the variable assignment to the variable declared in the component.
[(ngModel)]="email"
3. You haven't imported ngModel into the main apps.module.ts file in the imports: [] array.
a. import { FormsModule } from '@angular/Forms';
b. imports: [
BrowserModule,
FormsModule
]

NOTE: What I don't know is if this really belongs in the apps.module, or the module just above this component.

To format data:

• Uppercase
• Lowercase
• Decimal
• Currency
• Percent

1. {{ course.title | uppercase }}
2. {{ course.title | lowercase }}
3. {{ course.students | number }}
4. {{ course.price | currency:'USD':true:'3.2-02'}} //true for display the currency sign $
5. {{ course.releaseDate | date:'shortDate' }}

BrowserModule includes CommonModule

app/summary.pipe.ts

This is just an approximation - you can see it's <typeOfPipe>.pipe.ts for the naming convention. NOTE: I'd bet that summary.pipe.ts goes where it is most likely to be used. Whether that's a utils folder, or the app folder or just the currently connected folder where you're going to use it.

import { Pipe, PipeTransform } from '@angular/core'

import { Pipe, PipeTransform } from '@angular/core';

@Pipe {(
        name: 'summary',
)}
export class SummaryPipe implements PipeTransform {
            transform(value: string, args?: any) {
                if (!value) return null;
                return value.substr(0, 50) + '.';
            }
}

Register the pipe in app.module.ts:

    @NgModule({
        declarations: [
               AppComponent,
               CourseComponent,
               CoursesComponent,
               AuthorsComponent,
               SummaryPipe
], ...
    })    

First, the call to the pipe summary should take an argument of the number of characters you want to limit the summary to: {{ summaryText | summary:10 }} Second, modify the class to take an optional argument, and rename the argument for transform to limit, rather than args.

export class SummaryPipe implements PipeTransform {
     transform(value: string, limit?: any) {
           if (!value) return null;
           actualLimit = limit ? limit : 50;
           return value.substr(0, actualLimit) + "...";
     }
}

export class SummaryPipe implements PipeTransform {
     transform(value: string, limit?: any, allCaps: boolean) {

    ...
    }
}

// component where variable values are coming in.  Much like passing props to this component.
import { Component, Input } from '@angular/core'; 

export class FavoriteComponent implements OnInit {
        @Input() is Favorite: boolean;
        ....
}

// Your component's element - used by another template:
<favorite [isFavorite]="usersFavorite" > </favorite> 

Because if you change the name of myFavorite within the class, all references to myFavorite will automatically update to the new name -- but the inputs array will not change. Why?

Because inputs: [] creates a completely separate variable named myFavorite.

It is better to use the @Input() decorator and import that.

export class myTemplate {
    @Input('isFavorite') isSelected: boolean;
}

// someone else's template calling your myTemplate
>myTemplate [isFavorite]=myFavorite> >/myTemplate<

Did you rename the variable use within your template as well? Aliases only apply to incoming values -- the variable names are used inside the component's template, not the aliases.

1. In the catching component, write the function for the event:
onFavoriteChanged() { 'console.log(app.component.ts : onFavoriteChanged()');}

2. In the catching component's call to the template, add the event call:
>myTemplate (change)="onFavoriteChanged()"< >/myTemplate<

3. In the sending component (myTemplate):
a). import the Output decorator and EventEmitter from angular/core:
import { Component, Input, Output, EventEmitter } from '@angular/core';

b). Create a field with the exact same name as the event and decorate it with @output and initialize the field to an instance of the event emitter class:
@Output() change = new EventEmitter();

c). In the event handler in myTemplate class, raise the event:
this.change.emit();

1. Add the argument to the event emitter:

this.change(isSelected)

2. Tell the event handler in the other component that an argument is coming in:

onFavoriteChanged(isFavorite) {
        console.log("Favorite changed: ", isFavorite);
}

>myComponent (change)="OnFavoriteChanged($event)" /<>myComponent<

Use an alias. Set the alias to the original name that other components are using, then change the name of the variable.
@Output(change) onSelected = new EventEmitter();

1. Use the templateUrl: key within your @Component object.

@Component({
    templateUrl: './myComponent.template'
})

@Component({
    template: `
            
MyComponent
            
Hello!
    `
})

Within the main.bundle with the other code. There is not a separate file for template code.

1. styleUrls: ['./favorite.component.css'] within your @Component({}) object,

2. styles: [
           `
   
           `
   ]
                               

3. Inline within our templates.

Only the 2nd style declaration will take effect. The 1st will be forgotten.

The same as normal html:
>style< >/style<

No. Because of the Shadow DOM surrounding your component by default.

It allows us to apply scoped styles to elements without bleeding out to the outer world.

Yes - because you've changed the DOM - not the Shadow DOM'

Add: var root=el.createShadowRoot(); before your innerHTML styling, then use the innerHTML on your shadowRoot.

var el = document.querySelector('favorite');
var root=el.createShadowRoot();
root.innerHTML = `
        >style<h1 { color: red } >/style<
        >h1<Hello>/h1<
    `;

No. Only the most recent browsers support this. You can verify by going to dev tools and looking at the elements of a component. If you see Shadow DOM, you'll know this browser supports it.

Emulate the shadowDOM by using view encapsulation:

@Component({
        selector: 'favorite',
        templateUrl: './favorite.component.html',
        styleUrls: ['.favorite.component.css'],
        encapsulation: ViewEncapsulation.Emulated
});

It inserts _ngcontent-c1on each element in this component to identify all elements on this component. Then the styles are ONLY applied to the element with this class on it. These are generated only at runtime.

No. It is only supported by Chrome v53 or higher and Safari v10 or higher, you need to go to your Preferences in Chrome and select "Show user agent shadow DOM"

You can inspect your element and see #shadow-root (open) on your element.

If you don't see it, go to your settings, Preferences, Elements, and select "Show user agent shadow DOM"

No sure about this answer: Or maybe its the question:

When using encapsulation mode native, you may have to import your global styles into your component to see them within the shadow-root area.

Your styles may leak outside of your component.

encapsulation: ViewEncapsulation.Emulated in your @Component object. Here you are not browser specific, you have a shadow DOM to prevent styles leaking, and you don't have to make special imports just for shadow DOM to show icons.

encapsulation: ViewEncapsulation.Emulated

If this is what you want, you do not need to place the encapsulation key inside your component object. This is the default setting.

Build the reusable component, specifiying the injection points with ng-content giving the injection points a selector name such as ".body" or ".heading":

>div class="panel panel-default"<
        >div class="panel-heading"<
            >ng-content select=".heading"<>/ng-content<
        >/div<
        >div class="panel-body"<
            >ng-content select=".body"<>/ng-content<
        >/div<
>/div<
    

Within your component, you want to consume the reusable component using the selectors specified as classes.

>bootstrap-panel<
        >div class="heading"<Heading>/div<
        >div class="body"<
            >h2<Body>/h2<
            >p<Some content here...>/p<
        >/div<
>/bootstrap-panel<

No

<bootstrap-panel>
        <ng-container>Heading</ng-container>
        <div class="body">
            <h2>Body>/h2>
            <p>Some content here...>/p>
        </div>
</bootstrap-panel>
        
        

You need to change your conditional div to ng-template, assign it a template name, then use that in the first conditional.

<div *ngIf="courses.length > 0; else noCourses" > // using the template name in the conditional block
    List of courses
</div>
< ng-template #noCourses > // ng-template with a template name.
    No courses yet
</ng-template>

1. Replace conditional divs with ng-template, and name each template.
2. Add a wrapper div, with the conditional *ngIf and point to the name of the template

<div *ngIf="courses.length === 0; then noCourses else courseList">
     <ng-template #courseList>List of Courses<ng-template>
     <ng-template #noCourses>No courses available<ng-template>
</div>

<div [hidden]="courses.length == 0">Courses</div>
<div [hidden]="courses.length > 0">No Courses</div>

For small element trees, set the attribute hidden, for large element trees use *ngIf

    <div [ngSwitch]="viewMode">
        <div *ngSwitchCase="'map'">Map View content</div>
        <div *ngSwitchCase="'list'">List View Content</div>
        <div *ngSwitchDefault></div>
   
   </div>

insert the following in each line item:
<li [class.active]="viewMode=='map'"><a (click)="viewMode = 'map'">MapView</a></li>

It goes into the change detection queue:

Specific change detection.

When you are dynamically rendering objects in the DOM, if you change an object's reference -- event with identical information -- the DOM is re-rendered. Say you have a list of 1000 objects -- and you change the array that contains those objects but only one element in that array is changed -- the DOM will re-render the entire 1000 objects.

To save time, use trackBy and tell the DOM what to look for if the object has changed. You need to write a trackBy function though.

    <li> *ngFor course of courses trackBy=trackCourse>
        { course }
   </li>
   
   trackCourse(index, course) {
        return course ? course.id : undefined;
   }

It will move surround each if block with ng-template, then put the conditional inside an ngIf attribute, removing the template names as they are no longer needed

    <ng-template [ngIf]="courses.length > 0"> // adds ng-tmeplate wrapper; adds attribute [ngIf] set to condition; removes template name.
        <div>
             List of courses
        </div>
   </ng-template>
   <ng-template [ngIf]="!(courses.length > 0)">
        No courses
   </ng-template>

1. Use the #<elementName> construct:
   

   
       <div *ngIf="courses.length > 0; else noCourses">    
           List of Courses
       </div>
       <div #noCourses>
           No courses
       </div>
   

2. Use the default ng-template when there is only one ng-template:
   

   
       <div *ngIf="courses.length > 0; else noCourses">    
           List of Courses
       <ng-template>
           No courses
       </ng-template>   
   

1. Set the specific class attribute: [class.glyphicon-star]="isSelected"
2. Set the ngClass attribute's object:
   

   
   <span     
        [ngClass]="{
           'glyphicon-star':isSelected,
           'glyphicon-star-empty': !isSelected
        }"
   ></span>
   

Class attribute settings take the specific class: [<className>.<attributeName>]=""

ngClass settings takes a key:value pair where the key is the class name, and the value is the class name setting- like "style.borderColor"="black", or "hidden":true, or "hidden":isHidden,

1. use the [style.backgroundColor]="canSave? 'blue' : 'gray'"
2. use the ngStyle directive: [ngStyle]="{ 'backgroundColor': canSave ? 'blue' : 'gray'}"

? Use like: myObj.key1?.name: using the "?" will tell angular (and javascript/typescript) not to try to evaluate the name if there is no "key1"

$ ng g d input-format

• src/app/input-format.directive.spec.ts
• src/app/input-format.directive.ts
• updates src/app/app.module

in the @NgModule object's declarations array

@NgModule({
    declarations: [
      ... InputFormatDirective //added
  ]

/src/apps/app.module.ts:

@NgModule({
    declarations: []
    ... });}

1. import { Directive, HostListener, ElementRef } from '@angular/core';
2. Add the @Directive({ selector: '[appInputFormat]' }) decorator to your new directive class
3. Set a variable to receive on input: @Input('format') format:string;
4. Inject the ElementRef into your custom directive class: export class appInputFormat(el: ElementRef) {...}
5. Set a field for your class that will store the native value: let value: string = this.el.native.element.value
6. Setup a function that will execute when the native event is triggered - call it onBlur perhaps, but use the native DOM event called 'blur' for the @HostListener to listen to that event.
7. Inside any element, you would use the directive [appInputFormat] just as you use [*ngFor] or [*ngClass]

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
    selector: '[appInputFormat]'
})
export class appInputFormat( el: ElementRef) {
    // use the native element from the DOM to get a reference to the element
   let value: string = this.el.native.element.value;
   // use @Input to receive the format variable value
   @Input('format') format: string;

   @HostListener('blur') onBlur() {
           if (this.format === 'uppercase') {
                 this.el.native.element.value = value.toUpperCase();
           } else {
                 this.el.native.element.value = value.toLowerCase();
          }

   }
}

It listens to any element that has this directive included.

It is like a decorator, but it is used on a function.

@HostListener takes the name of the event inside the dom to listen to: 'focus' or 'blur'.

@HostListener is used on the method of the custom directive class.

// subscribe to the 'focus' DOM event
@HostListener('focus') onFocus() {
        console.log("on Focus");
}

// subscribe to the 'blur' DOM event
@HostListener('blur') onBlur() {
        console.log("On Blur");
}

1. <input type="text" appInputFormat [format]="'uppercase'">
2. <input type="text" [appInputFormat]="'uppercase'">
   Then modify your custom directive, chaging the @Input('format') format; to @Input('appInputFormat') format;

Use FormControl for each input box ort field, or use FormGroup for a group of input boxes (each with their own FormControl). Each yield the following:

• value
• touched
• untouched
• dirty
• pristine
• valid
• errors

True

Reactive:

• More control over validation logic
• Good for complex forms
• Unit testable

Template Driven:

• Good for simple forms
• Simple validation

1. For two way binding of variables, you would use banana in a box: [(ngModel]) name="<someName>" within an element.
2. For the simplest form, ngModel name="name" will provide tthe settings of formControl within the ngModel object -- so you don't need to explicitly define class="form-control"'

Place an immediate <div> under the input control; Assign it bootstrap classes of "alert alert-danger", then give it some conditions

Use ngModel and set your template name to ngModel.

<input required ngModel name="firstName" #firstName="ngModel" (change)="log(firstName)" />

1. First, in the input element, use ngModel and assign the template name of the input element to ngModel.
   

   <input ngModel name="firstName" #firstName="ngModel" (change)="log(ngModel)" id="firstName" type="text" >  </input>
   

2. Create divs to house specific validation errors:
   

   <div "alert alert-danger" *ngIf="!firstName.valid">First Name is not valid </div>

   
   

   <div "alert alert-danger" *ngIf="firstName.length < 3">First Name must be more than 3 characters. </div>

1. On the input element, place the required directive.
   <input required ...>
2. Create a div under the input element with the validation specifications:
   <div class="alert alert-danger" *ngIf="!firstName.valid && firstName.touched">First Name is required.</div>
   
   This uses the template variable #firstName from the input element and the bootstrap classes "alert" and "alert-danger" along with ngModel's .valid and .touched attributes.

<div class="alert alert-danger" *ngIf="!firstName.valid && firstName.touched">First Name is required</div>

Set the minlength and maxlength directives on the inputfield:

<input required minlength="3" maxlength="10" ngModel name="FirstName" #firstName .../>
<div class="alert alert-danger" *ngIf="firstName.touched && firstName.minlength > 2">First name must be at least 3 characters</div>
<div class="alert alert-danger" *ngIf="firstName.touched && firstName.maxlength > 10">Last name must be less than 10 characters</div> 

Use seperate div for each validation error, with the reason for the error in the divs text. (See above)

Use the for directive with the id of the input element on the label.

<form>
     <label for="firstName">First Name</label>
     <input id="firstName" type="text" class="form-control"></input>
</form>

Not with name="firstName", but with the template variable #firstName=ngModel. Then in the ngIf, to validate the input field, you can use firstName.valid.

Use the errors from the templateName.errors object

<div class="alert alert-danger" *ngIf="!firstName.touched && firstName.valid></div>
    <div *ngIf="firstName.errors.minlength" >First name must be a minimum length of 3 characters.</div>
   <div *ngIf="firstName.errors.required">First name is required></div >
</div>

• minlength
• maxlength
• pattern="a reg expression or string"

<div ...>Minimum chars required is {{ firstName.errors.minlength.required }} characters</div>
<div ...>Maximum chars required is {{ firstName.errors.maxlength.required }} characters</div>

In your main .css file:

.form-control.ng-touched.ng-invalid {
    border: 2px solid red;
}

• required : // to make sure there IS an input
• minlength="3" : setting the HTML minlength property
• maxlength="10" :setting the HTML maxlength property
• pattern="banana" : setting the HTML regexp property
• name="firstName" : to pass the value of your input to your on change function
• #firstName="ngModel" : so you have access to the .valid, .errors, etc. properties
• (change)="log(firstName) : using the DOM's on change event, pass the input string'"

1. On your control objects (input) you can check if the individual controls are valid using the template variable for the control.
2. on your form element, you've created a template name #f. Check !f.errors

There are two ways to do this:

1. Surround your input element with the label element:
   

   <form>
       <label>First Name
           <input id="firstName" type="text" class="form-control"></input>
       </label>
   </form>

2. Name your label with the same name as the input:
   

   <form>
       <label for="firstName">First Name</label>
       <input id="firstName" type="text" class="form-control"></input>
   </form>

Not with name="firstName".

Use the template variable #firstName=ngModel. Then in the ngIf, to validate the input field, you can use firstName.valid.

ngModel gives the template name #firstName all of the properties in an ngModel.

Use the errors object exposed through name of the input object: [check this out, was this ngModel?]

<div class="alert alert-danger" *ngIf="!firstName.touched && firstName.valid></div>
    <div *ngIf="firstName.errors.minlength" >First name must be a minimum length of 3 characters.</div>
   <div *ngIf="firstName.errors.required">First name is required></div >
</div>

ngForm or
    [ngForm]

<form #f="ngForm" (ngSubmit)="submit(f)"></form>

1. ou will want a submit button. This comes with ngForm. You will want to bind your submit function with the ngSubmit event that is fired when the submit button is pressed:
   

   <form #f="ngForm" (ngSubmit)="submit(f)"></form>

2. You will want to group your fields in your form, like firstName and lastName together in an ngModelGroup div and name it.
   

   <div ngModelGroup="contact" #contact="ngModelGroup"></div>

3. Then fire off validations for the contact form:
   

   <div class="alert alert-danger" *ngIf="firstName.touched && ... mumble ...>
       <div *ngIf="!contact.valid">
           <div *ngIf="!contact.firstName.touched">Must have a value for first name.</div>
           ...
      </div>

ngForm would need a submit button and a submit event on the form, where ngModelGroup does would not.

ngModelGroup would be used for complex groups where multiple ngModelGroups are used

<button class="btn btn-primary" [disabled]="!f.valid">Submit*lt;/div> // binding the disabled HTML property to !f.valid

No - Angular will see the <form> element, and unless otherwise defined it will automatically create this as an ngFormGroup.

<input type="checkbox" ngModel name="isSubscribed">Subscribe to mailing list</>

Then Angular will create an instance of the form-control object for this input field.

You also need name="isSubscribed" to indicate the status of the checkbox.

<p>
            {{ f.value | json }}
</p>

<option value=""gt;</option;>
<option *ngFor="let method of contactMethods" [value]="method.id">{{ method.name }} </option>

<option *ngFor="let method of contactMethods" [ngValue]="method">{{ method.name }} </option>

<select multiple ngModel name="contactMethod" id="contactMethod" class="form-control">

• ngModel which will make it a FormControl element
• The value for the form control element:
  

  < div class="radio">
      <label>
              <input type="radio" name="contactMethod" [value]="1">
              Email
      <label>
  
      <label>
      <input type="radio" name="contactMethod" [value]="2">
              Phone
      <label>
  </div>
  

First we add *ngFor then we change value="1" to a property binding for [value]="method.id";

< div *ngFor="let method of contactMethods" class="radio">
    <label>
        <input type="radio" name="contactMethod" [value]=method.id />
            Email
    </label>
</div>