-
How do you listen to an event?
- enclose the event type in brackets, then call it's method name
- eg.
- (click) = "changeName()"
-
How to construct a function that returns an Object in Typescript
- function getTypes<t>(value: T): string {
- }
-
2 kinds of Directives
- Structural (*ngIf)
- Attribute (*ngClass)
-
Structural directives is indicated by __?
-
What's the syntax for 2-way data binding
[(ngModel)]
-
Where do you add the selectors?
html
-
how to assign a type variable
let name: string = "Orly"
-
How to construct a void function in typescript
- function setName(name: string): void {
- }
-
this keyword is used to indicate that variable can be assigned to any data type
- var
- eg.
- let anything: any = 'sicat'
-
How to register services with Injector and DI
- @NgModule({
- providers: [EventService, ToastrService]
- -=-=-
- constructor(private eventService: EventService)
- -=-=-
- ngOnInit() {
- this.events = this.eventService.getEvents()
- }
-
How do you import components? And use destructuring at the same time
import { Vehicle, VehicleService } from './vehicle.service';
-
The 4 types of Databinding
- String interpolation eg. {{data}}
- Property binding eg. [property] = "data"
- Event binding eg. (event) = "expression"
- two-way binding eg. [(ngModel)] = "data"
-
We use ___ to organize our application into cohesive blocks of related functionality
- NgModule
- eg:
- @NgModule({
- imports: [
- BrowserModule
- ],
- declarations: [
- EventsAppComponent,
- EventsListComponent,
- EventThumbnailComponent,
- NavBarComponent
- ],
- providers: [EventService, ToastrService],
- bootstrap: [EventsAppComponent]
- })
-
Roles of Angular Modules
- Import other Angular Modules eg: imports: []
- Identify Components, Pipes, and Directives eg. declarations: []
- Export it’s features
- Provide services to injectors eg. providers: []
- Can be eagerly or lazily loaded
-
The purpose of a ___ is to declare each thing you create in Angular, and group them together (like Java packages)
NgModule
-
A ___ is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM
- selector
- eg.
- @Component({
- selector: 'events-app'
- ...
- })
- -=-=-
- <!-- in html -->
- <body class="container">
- <events-app></events-app>
- </body>
-
__ indicates property binding
- []
- eg.
- <button type="button" [disabled]="allowNewServer" ../>
- -=-=-
- export class ServersComponent implements onInit {
- allowNewServer = false;
- }
-
What do you call this symbols {{ }}?
eg. {{ character.name }}
interpolation
-
____ are used to display the information from the model and controller that a user sees in his browser
Templates
-
Components have ___ which may use other components
templates
-
Event is indicated by ___
- ()
- eg.
- <button .. (click)="cancel()" />
-
We use ___ to tell Angular about the objects we build. It links the template to the Component
- Metadata
- eg:
- @NgModule({
- declarations: [
- EventsAppComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- bootstrap: [EventsAppComponent]
- })
-
The ___ is a decorator that provides metadata describing the Component
- @
- eg.
- @Component({
- selector: 'events-list',
- template:
- ..
- }
-
A component can emit an event using ___ and ___
@Output() changed = new EventEmitter<Character>();
- ...
- this.changed.emit(selectedCharacter);
- -=-=-
- <story-characters ... (changed)=changed($event) />
-
Use an ___ decorator to make an instance variable available to parent components to pass data down
- @Input
- eg.
- @Input() storyId: number;
- -=-=-
- <story-characters [storyId]="7" />
-
The __ operator is used to avoid error when an object is undefined
- ? (elvis operator)
- eg.
- <!-- html -->
- Here is {{ vehicle?.name }}
-
This sysmbol is useful when debugging, say you want to see the entire data of an object displayed in browser
- | (pipe)
- eg.
- {{ character | json }}
- This will display the character in json
-
We set properties and events of __ ___, not attributes.
DOM elements
-
Using the ___ to send values from the Component to the Template
- [ ]
- eg.
- in html
- <vehicle-detail [vehicle]="currentVehicle" />
-
What are the 3 ways to style your html?
- Attribute binding eg. <button [attr.aria-label]="ok">ok</button>
- Class property binding eg. <div [class.isStopped]="isStopped">Stopped</div>
- Style property binding eg. <button [style.color]="isStopped ? 'red' : 'blue'">
- eg.
-
Angular includes ___ that contains the information about an event. Its type depends on the target event, e.g., if the target event is a native DOM element event, then it is an object.
- $event
- eg.
- (input)="vehicle.name=$event.target.value">
-
___ defines a new event. Fires its __ method to raise event with data. Usually used when defining customer events.
- EventEmitter, emit()
- eg.
- @Input() vehicle: Vehicle;
- @Output() onChanged = new EventEmitter<Vehicle>();
- changed(){ this.onChanged.emit(this.vehicle); }
-
___ sends a value from Component to Template, and
sends value changes in the Template to the Component.
[( )] or two-way binding
-
To create a service class, we inject the class with ___.
- @Injectable()
- eg.
- @Injectable()
- export class VehicleService {
-
How do you inject a service in another class?
- Through constructor
- eg.
- vehicles = this.vehicleService.getVehicles();
- ...
- constructor(private vehicleService: VehicleService) { }
-
___ allow you to format data in html
- pipes
- eg.
- <td>{{entriesSvc.sortedEntries[0].date | date}}</td>
-
What do you clone an object in Javascript?
- Object.assign(target, ..sources)
- eg.
- createEntry() {
- let newEntry = Object.assign({}, this.model(
- {
- bodyfat: this.model.bodyfat / 100,
- date: new Date(this.model.date)
- })
- this.create.emit(newEntry);
- }
-
__ is used to create a top-level form group Instance, and it binds the form to the given form value.
- ngForm
- eg.
- <form #entryForm="ngForm" ..>
- ...
- <button [disabled]="entryForm.form.invalid ../>
-
The ___ directive binds the value of HTML controls (input, select, text-area) to application data. If it's 2-way-bound, the value in the UI always syncs back to the domain model in your class
- ngModel
- eg.
- <input ... [(ngModel)]="model.weight" />
-
if the child only needs to receive data from the parent, you'd only need ___ decorator.
@Input()
-
To watch for changes on an @Input() property, use ___.
OnChanges
-
Use the __ decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component.
@Input()
-
Before you can use [(ngModel)] in html, you have to import this in app.module.ts
- FormsModule
- e.g.
- import { FormsModule } from '@angular/forms'
-
___ are instructions in the DOM
Directives
|
|
