Angular Notes

Angular Installation

To go to wanted directory in cmd prompt:

cd *name of folder that you want angular to be installed in*

To create a new project:

ng new *name of project*

To run project:

ng serve

For angular installation while cmd is in wanted directory:

npm install -g @angular/cli

For bootstrap in angular:

ng add @ng-bootstrap/ng-bootstrap

For Angular Material in Angular:

ng add @angular/material

For jQuery in Angular:

ng add — save jquery

To make new component within the project:

ng generate component *specific-folder*/*component-name*

To make a custom directive:

ng generate directive *specific-folder*/*directive-name*

To make a service:

ng generate service *specific-folder*/*service-name*

To close terminal:

ctrl+c

Using Forms

Add the attribute ngModel to all inputs within the form, and give each input a semantic name. Add a Local Reference to the form so that Angular knows which form you are referring to when called, and then assign ngForm as a value. Local references are simply ids without the id attribute added to them.

eg: <form (submit) = "OnAddPost(PostForm)" #PostForm= "ngForm">

After that, you can assign that value to a variable / array of type ngForm. Then, you can access each of the inputs in that form individually by using the

Syntax: *variable which contains ngForm*.value.*HTMLname you defined of input*

Use: if(form.invalid) return to not do anything if form is invalid.

Edit md files in VSCode

To save a Notepad file as a .md file, enter the name in double quotes and add .md to the end of file name while saving.

Open the Command Palette (ctrl+Shift+P) and run “Configure language specific settings”.

Select Markdown, then enter the following in the json file:

"editor.quickSuggestions": false, 
    //Controls if quick suggestions should show up while typing
"editor.acceptSuggestionOnEnter": false, 
    //Controls if suggestions should be accepted with "Enter" in addition to "Tab".

Declare CSS Variables in Angular

First import ElementRef:

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

Declare a variable of type ElementRef in the constructor.

constructor(private el:ElementRef) { }

The command:

(this.el.nativeElement as HTMLElement).style.setProperty('--bg', '#FBE0CE');

This line sets the variable --bg to the color #FBE0CE .

Put the command in ngOnInit to set the CSS variable value on load.