Mobile App Quiz 3 Flashcards
difference between (ngModel) and [(ngModel)]
(ngModel) is one-way data binding (won’t see instant changes) whereas [(ngModel)] is two-way data binding (will see instant changes)
how to create and add a custom component
ionic g component myComponent
directive
used to modify behavior of an existing element; resemble css class attributes
how to generate a directive
ionic g directive myDirective
how to import a directive
import {Directive, ElementRef} from ‘@angular/core’};
pipe
transforms a value and renders out to the screen
how to generate a pipe
ionic g pipe myPipe
example of a pipe
to lower case function
how to implement a pipe
<p>{{someValue | myPipe }}</p>
injectible/service/provider
used to store and access saved data
local store is
limited
how to generate a provider
ionic g provider myProvider
- notation denotes a
template
templates
used for structural directives (shortcut for creating an embedded template)
ionic treats templates as
chunks of the DOM
templates can be
dynamically manipulated
the *ngIf template allows angular to
apply some logic to the code before rendering
interpolations
evaluate the expression and renders the result
example on an interpolation
<p>Hi, {{name}}</p>
will reference name variable in the typescript and output it here
looping
like an enhanced for loop in java
{{item}}
you must supply an array items in the class
decision structure
if but no else
<div></div> will only render that div if the boolean is true
switch
<div>
<p>Text</p>
...
<p>Default</p></div>
[hidden]=”whatever”
do not use! this is property binding - it references items from the class and only is using CSS to hide the elements, meaning they are still being rendered and are still part of the DOM
use ? over hidden
ngIf
slots
control how elements are displayed (placeholder for where injected)
slot start means
left
slot end means
right
