> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/angular-cheat-sheet.md).

# Angular Cheat Sheet

A quick guide for angular concepts and commands

## Angular CLI

#### Useful CLI Commands

{% hint style="info" %}
**NOTE** in the below commands, **<> denote** a place holder for an actual word. For example\
ng new ~~**\<app-name>**~~  would be run with no <>\
ng new **myApp**
{% endhint %}

| CLI Command                             | Description                                  |
| --------------------------------------- | -------------------------------------------- |
| ng new \<app-name>                      | Creates a new angular app                    |
| ng serve                                | Starts yours angular App                     |
| ng generate component \<component-name> | Creates a new Component, with the name given |
| ng generate service \<service-name>     | Creates a new Service, with the name given   |
| ng build                                | Puts together an build for deployment        |

## Angular Building Blocks

| Building Block | Description                                                              |
| -------------- | ------------------------------------------------------------------------ |
| Modules        | Largest building block that helps organize our code.                     |
| Component      | A component has typescript, html and css. This is what will be displayed |
| Service        | Contains our solicitations logic. Components use services.               |

## Routing Boiler Plate Starter

{% tabs %}
{% tab title="Boilerplate" %}
{% code title="app-routing.module.ts" %}

```typescript
import { 
    Routes, 
    RouterModule 
} from '@angular/router';

const routes: Routes = [];

@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]
})

export class AppRoutingModule { }
```

{% endcode %}
{% endtab %}

{% tab title="Sample Router" %}
{% code title="app-routing.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { 
  Routes, 
  RouterModule 
} from '@angular/router';

//Components
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

// Routes for components that will serve as pages
const routes: Routes = [ 
    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```

{% endcode %}

\
**(1)** Lines **1-3** import core angular routing\
**(2)** Lines  **8 -10** are our import for components that will have routes\
**(3)** Line **13** define what endpoint / route goes to what component.
{% endtab %}

{% tab title="app.module.ts" %}
{% code title="app.module.ts" %}

```typescript
import { NgModule }      from '@angular/core';            
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

import { AppRoutingModule } from './app-routing.module.ts'; (1)

@NgModule({
  imports: [ BrowserModule, 
            AppRoutingModule (2)
  ], 
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ] 
  providers: [ SomeService ]
})
```

{% endcode %}

**(1)** We are importing the class from **app-routing.module.ts** \
**(2)** Added AppRoutingModule from **line 5** to the imports array, see **line 9**
{% endtab %}
{% endtabs %}

## Modules Explained

{% code title="A module" %}

```typescript
import { NgModule }      from '@angular/core';            
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { SomeService } from './some-service';

@NgModule({
  imports: [ BrowserModule ], (1)
  declarations: [ AppComponent ], (2)
  bootstrap:    [ AppComponent ] (3),
  providers: [ SomeService ]
})
```

{% endcode %}

| Line # | `NgModules`                                                                                                                                                                                                                                                     |                        import { [NgModule](https://angular.io/api/core/NgModule) } from '@angular/core';                        |
| :----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------: |
|    1   | <p><code>@</code><a href="https://angular.io/api/core/NgModule"><strong><code>NgModule</code></strong></a><code>({ declarations: ..., imports: ...,</code><br><code>exports: ..., providers: ..., bootstrap: ...})</code><br><code>class MyModule {}</code></p> |                           Defines a module that contains components, directives, pipes, and providers.                          |
|    7   | **`declarations:`**` ``[MyRedComponent, MyBlueComponent, MyDatePipe]`                                                                                                                                                                                           |                              List of components, directives, and pipes that belong to this module.                              |
|    6   | **`imports:`**` ``[`[`BrowserModule`](https://angular.io/api/platform-browser/BrowserModule)`, SomeOtherModule]`                                                                                                                                                | List of modules to import into this module. Everything from the imported modules is available to `declarations` of this module. |
|   10   | **`providers:`**` ``[MyService, { provide: ... }]`                                                                                                                                                                                                              |       List of dependency injection providers visible both to the contents of this module and to importers of this module.       |
|    9   | **`bootstrap:`**` ``[MyAppComponent]`                                                                                                                                                                                                                           |            List of components to bootstrap when this module is bootstrapped. (Component to load when the app starts)            |

## Components & Templates

### Property Binding and Interpolation

| `Syntax`                                                                                                                                                                                                             | Description                                                                                                                                                        |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `<button`` `**`(click)`**`="readRainbow($event)">`                                                                                                                                                                   | Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object.                                |
| `<p>Hello`` `**`{{ponyName}}`**`</p>`                                                                                                                                                                                | Binds text content to an interpolated string, for example, "Hello Seabiscuit".                                                                                     |
| `<div`` `**`[class.extra-sparkle]`**`="isDelightful">`                                                                                                                                                               | Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`.                                             |
| `<div`` `**`[style.width.px]`**`="mySize">`                                                                                                                                                                          | Binds style property `width` to the result of expression `mySize` in pixels. Units are optional.                                                                   |
| `<div title="Hello`` `**`{{ponyName}}`**`">`                                                                                                                                                                         | Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: `<div [title]="'Hello ' + ponyName">`                                  |
| `<my-cmp`` `**`[(title)]`**`="name">`                                                                                                                                                                                | Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`                                                                 |
| <p><code>\<video </code><strong><code>#movieplayer</code></strong><code> ...></code><br><code>\<button </code><strong><code>(click)</code></strong><code>="movieplayer.play()"></code><br><code>\</video></code></p> | Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template. |
| `<p>Employer:`` `**`{{employer?.companyName}}`**`</p>`                                                                                                                                                               | The safe navigation operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.                   |