killerchip

Dependency Injection

When we want to use a dependent class/value, instead of creating them ourselves, Angular's DI framework will do it for us. In order to do this, we must define for the class/value a Token. Once Angular sees that we want to inject the specific token, it will create the class/value and provide it to our class.

Injecting a Class

Create a class with Injectable decorator

killerchip

Component event emitters

@Output() myEvent: EventEmitter<string> = new EventEmitter();

public onClick() {
  this.myEvent.emit('you clicked me!');
}

killerchip

Use a link as button

Sometimes is more 'elegant' to use an linke (href) as button instead of a button, even if we don't want actually to navigate away from the page. But even with no URL in the href element the page 'refreshes'. This is how to avoid this.

If the click-handler function returns false value, then this stops propagation of the click further.

HTML Template

<a href (click)="clickMe()">Click Me!</a>

killerchip

Component adds class to itself

When defining a component you can define a class (and other attribute) on its own host element.

For example if you define the <my-component></my-component component, you can define it to have a class like <my-component class="my-component-class"> directly from compoent code. So you are not dependent on the "user" of this component to define the class.

This can be done with the @HostBinding

export class MyComponent {

killerchip

Simple input without complex forms

The following is a quick example of how to simply grab input from user, without using Angular forms and form builder. Of course it is for very simple cases.

HTML Template

<form>

killerchip

Killerchip's Javascript notes

Coding notes, tips, cheats, guides, code snippets and tutorial articles

Table of Contents

• Safe object property assignment and fallback value

killerchip

Killerchip's Angular notes

Coding notes, tips, cheats, guides, code snippets and tutorial articles

Table of Contents

• Starting an Angular project
• Simple input with no forms
• Add component class from the inside
• Use link as button

killerchip

Starting an Angular Project Guidelines

Here follows a draft guide/checklist on how to get started with an angular project.

• PAGE BUILDING
  • Identify and scetch Components tree.
    • Identify components and subcomponents
    • Make list of items components themselves.
  • Identify the model and model classes.
• tip: Try to isolate data structures from components. Think... "can the component be replaced without affecting data"?

killerchip

Killerchip's Typescript notes

Notes, tips, cheats, guides, code snippets and tutorial articles

Table of Contents

• Creating model classes in Typescript
• Enums cheatsheet

killerchip

Creating model classes in Typescript

Tip: Recommended way of creating classes that model the data of your Typescript app.

Creating simple classes

Create a simple class with a small set (0-3) of parameters in the constructor.

• Define the properties directly in the parameter of the constructor.
• Define optional parameters by defining default values