# 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.