Angular Cheatsheet Zero To Mastery V1.01
Angular Cheatsheet Zero To Mastery V1.01
CHEAT SHEET
LUIS RAMIREZ JR.
V1.01
HEEELLLOOOOO!
I’m Andrei Neagoie, Founder and Lead Instructor of the Zero To Mastery Academy.
After working as a Senior Software Developer over the years, I now dedicate 100% of my time to
teaching others valuable software development skills, help them break into the tech industry, and
advance their careers.
In only a few years, over 600,000 students around the world have taken Zero To Mastery courses
and many of them are now working at top tier companies like Apple, Google, Amazon, Tesla, IBM,
Facebook, and Shopify, just to name a few.
This cheat sheet, created by our Angular instructor (Luis Ramirez Jr.) provides you with the key
Angular concepts that you need to know and remember.
If you want to not only learn Angular but also get the exact steps to build your own projects and
get hired as a developer, then check out our Career Paths.
Happy Coding!
Andrei
P.S. I also recently wrote a book called Principles For Programmers. You can download the first
five chapters for free here.
Angular Cheat Sheet: Zero To
Mastery
TABLE OF CONTENTS
Starting a New Project
Installing a Library
Creating Components
Lifecycle Hooks
Services
Modules
Angular Directives
Attribute Directives
Structural Directives
Custom Directives
Pipes
Decorators
Useful Links
# Yarn
yarn global add @angular/cli
Angular will prompt you to configure the project. For the default settings, you can press
the Enter or Return keys. During the installation process, Angular will scaffold a default
project with packages for running Angular.
# Production
ng build --prod
Installing a Library
Without a doubt, you will find yourself installing 3rd party libraries from other developers.
Packages optimized for Angular may be installed with a special command that will
install and configure a package with your project. If a package is not optimized for
Angular, you have the option of installing it the traditional way.
# Installation + Configuration
ng add @angular/material
# Installation
npm install @angular/material
Creating Components
Components are the buildings blocks of an application. You can think of them as a
feature for teaching browsers new HTML tags with custom behavior. Components can
be created with the CLI. Typically, Angular offers a shorthand command for those who
prefer to be efficient.
# Shorthand
ng g c MyComponent
Angular will generate the component files in a directory of the same name. You can
expect the following.
*.component.html - The template of the component that gets displayed when the
component is rendered.
Along with creating the files, component classes are decorated with the @Component
decorator and registered with the closest module. Here are some common helpful
options:
Example Description
Option
--dry-
ng g c Does not output the result. Useful for keeping your
run (-
MyComponent -d
command line clean.
d )
ng g c
--
export
MyComponent -- Exports the component in the module's exports option.
export
ng g c
--skip-
tests
MyComponent -- Skips creating the **.spec.ts file.
skip-tests
ng g c
A file extension or preproccessor for the style files. Can
--style MyComponent --
style=scss be set to 'none' to skip generating a style file.
ngOnInit : Runs after a component has been initialized. Input bindings are ready.
Services
Services are objects for outsourcing logic and data that can be injected into our
components. They're handy for reusing code in multiple components. For medium-sized
apps, they can serve as an alternative to state management libraries.
# Shorthand
ng g s MyService
Services are not standalone. Typically, they're injected into other areas of our app. Most
commonly in components. There are two steps for injecting a service. First, we must
add the @Injectable() decorator.
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}
1. Injectable Decorator
This option is the most common route. It allows the service to be injectable anywhere in
our app.
@Injectable({
providedIn: 'root'
})
2. Module
This option allows a service to be injectable in classes that are imported in the same
module.
@NgModule({
declarations: [],
imports: [],
providers: [MyService}],
bootstrap: []
})
3. Component Class
Once you've got those two steps settled, a service can be injected into the constructor()
function of a class:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>Hello World</p>',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
constructor(private myService: MyService) { }
}
Modules
Angular enhances JavaScript's modularity with its own module system. Classes
decorated with the @NgModule() decorator can register components, services, directives,
and pipes.
declarations - List of components, directives, and pipes that belong to this module.
imports- List of modules to import into this module. Everything from the imported
modules is available to declarations of this module.
exports - List of components, directives, and pipes visible to modules that import
this module.
providers- List of dependency injection providers visible both to the contents of this
module and to importers of this module.
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular Directives
Directives are custom attributes that can be applied to elements and components to
modify their behavior. There are two types of directives: attribute directives and
structural directives.
Attribute Directives
An attribute directive is a directive that changes the appearance or behavior of an
element, component, or another directive. Angular exports the following attribute
directives:
NgStyle
NgModel
Adds two-way data binding to an HTML form element. Firstly, this directive requires the
FormsModule to be added to the @NgModule() directive.
Secondly, we can bind the [(ngModel)] directive on an HTML <form> element and set it
equal to the property.
<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">
The `NgModel` directive has more customizable options that can be [found here]
(https://angular.io/guide/built-in-directives#displaying-and-updating-properties-with-
ngmodel).
Structural Directives
Structural directives are directives that change the DOM layout by adding and removing
DOM elements. Here are the most common structural directives in Angular:
NgIf
A directive that will conditionally create or remove elements from the template. If the
value of the NgIf directive evaluates to false , Angular removes the element.
NgFor
NgSwitch
An alternative directive for conditionally rendering elements. This directive acts very
similarly to the JavaScript switch statement. There are three directives at our disposal:
NgSwitch— A structural directive that should be assigned the value that should be
matched against a series of conditions.
Custom Directives
We're not limited to directives defined by Angular. We can create custom directives with
the following command:
# Common
ng generate directive MyDirective
# Shorthand
ng g d MyDirective
To identify directives, classes are decorated with the @Directive() decorator. Here's
what a common directive would look like:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class appMyDirective {
constructor(private elRef: ElementRef) {
eleRef.nativeElement.style.background = 'red';
Pipes
Pipes are known for transforming content but not directly affecting data. They're mainly
utilized in templates like so:
{{ 'Hello world' | uppercase }}
UpperCasePipe
LowerCasePipe
CurrencyPipe
DecimalPipe
Transforms a number into a string with a decimal point, formatted according to locale
rules.
{{ 3.14159265359 | number }}
PercentPipe
Decorators
Angular exports dozens of decorators that can be applied to classes and fields. These
are some of the most common decorators you'll come across.
Useful Links
Angular Documentation
Angular Devtools
Angular Blog
Angular Routing
Angular Forms
Back To Top