Angular

orderBy

Orders an array by an expression.

ng-if

Removes the HTML element if a condition is false.

What are the ways to access latest version of JS ES6?

- Babel (transpile: it gets changed into JavaScript) - TypeScript (superset of js transpile)

What are the difference between Angular 1 and Angular 2?

- Speed - Components vs controllers and scope - Simpler directives - Intuitive data binding - Services are now just a class

Why is it good that the css is scoped to the Component?

Adds a custom attribute to the html and css too. If we would reuse this class ".description" on an other component they wouldn't clash, they all scoped to the directive.

What is the decorator function?

Adds more behavior to our class from outside of our class. If must be declared immediately before the class. The decorator turns our old JS class into a component. import { bootstrap } from '@angular/platform-browser-dynamic'; import { Component } from '@angular/core'; //COMPONENT TOP @Component({//apply our comp. decorator to our class selector: 'my-app', // custom html selector where we want our component to load template: '<h1>...</h1>' // content }) //COMPONENT BOTTOM class AppComponent { } bootstrap(AppComponent) // instantiate app

a

AngularJS modifies the <a> element's default behaviors.

form

AngularJS modifies the <form> element's default behaviors.

input

AngularJS modifies the <input> element's default behaviors.

script

AngularJS modifies the <script> element's default behaviors.

select

AngularJS modifies the <select> element's default behaviors.

textarea

AngularJS modifies the <textarea> element's default behaviors.

What is Component?

Basic building blocks, controls a portion of the screen. It's a directive with a template. Easily nest one inside the other. In Angular, we add dynamic behavior to HTML using directives.

ng-bind

Binds the content of an HTML element to application data. Pretty much the same as {{}} (curly markup -- which is generally preferable because it is less verbose) but can be useful if template is displayed in it's raw state before angular compiles -- because ng-bind is an attribute, it makes bindings invisible to the user while the page is loading.

ng-bind-html

Binds the innerHTML of an HTML element to application data, and also removes dangerous code from the HTML string.

ng-model

Binds the value of HTML controls to application data.

ng-csp

Changes the content security policy.

How class property binging works?

Class binding allows us to specify a CSS class to a DOM element if a component property is true. [class.featured]="part.featured" If the value is true the class added, otherwise it's removed. Note that the html element and the class are properly scoped. If you bind directly to the class element property, it will overwrite all classes. [class]="property"// not a good practice

angular.lowercase()

Converts a string to lowercase

angular.uppercase()

Converts a string to uppercase

ng-list

Converts text into a list (array).

angular.copy()

Creates a deep copy of an object or an array

ng-repeat

Defines a template for each data in a collection.

ng-init

Defines initial values for an application.

ng-controller

Defines the controller object for an application.

ng-app

Defines the root element of an application.

What are the 3 different kinds of directives?

Directive: how we add dynamic behavior to HTML - Component directive: has a template - Structural directive: Alters layout by adding, removing or replacing HTML elements. *ngFor, *ngIf - Attribute directive

How event binding works?

Event binding allows us to listen any DOM event and call a component method when it's triggered. To capture an event from our template, we wrap the name of the event we want to listen to in a parentheses and specify the method to call. Any event can be listened without the "on": mouseover, blur, submit. (click)="doThis($event)" // event object can be accessed

angular.forEach()

Executes a function for each element in an object or array

date

Format a date to a specified format.

currency

Format a number to a currency format.

number

Format a number to a string.

lowercase

Format a string to lower case.

uppercase

Format a string to upper case.

json

Format an object to a JSON string.

ng-hide

Hides or shows HTML elements.

How to import Class B to an other file?

In order for Class B to be imported into another file, Class B needs to use the export keyword.

ng-include

Includes HTML in an application.

What is SystemJs used for?

Is a JS library that allows us to import other libraries.

limitTo

Limits an array, or a string, into a specified number of elements/characters.

How to add html and css to our Component from a template?

On Component add attributes: TemplateUrl: '...' and styleUrls: ['...'] with path to the template files.

How property binging works?

Property binding allows us to glue component properties to any DOM element properties. [src]='part.image' The square brackets tell Angular to set this DOM element property to our component property. If the component property changes, update this DOM. (one-way binding)

What is the observable in http calls?

Our http calls return an observable, not a promise, which behaves more like an array.

ng-cloak

Prevents flickering when your application is being loaded.

angular.isArray()

Returns true if the reference is an array

ng-class-even

Same as ng-class, but will only take effect on even rows.

ng-class-odd

Same as ng-class, but will only take effect on odd rows.

filter

Select a subset of items from an array.

ng-show

Shows or hides HTML elements.

ng-options

Specifies <options> in a <select> list.

ng-class

Specifies CSS classes on HTML elements.

ng-blur

Specifies a behavior on blur events.

ng-copy

Specifies a behavior on copy events.

ng-cut

Specifies a behavior on cut events.

ng-dblclick

Specifies a behavior on double-click events.

ng-focus

Specifies a behavior on focus events.

ng-keydown

Specifies a behavior on keydown events.

ng-keypress

Specifies a behavior on keypress events.

ng-keyup

Specifies a behavior on keyup events.

ng-mousedown

Specifies a behavior on mousedown events.

ng-mouseenter

Specifies a behavior on mouseenter events.

ng-mouseleave

Specifies a behavior on mouseleave events.

ng-mousemove

Specifies a behavior on mousemove events.

ng-mouseover

Specifies a behavior on mouseover events.

ng-mouseup

Specifies a behavior on mouseup events.

ng-paste

Specifies a behavior on paste events.

ng-switch

Specifies a condition that will be used to show/hide child elements.

ng-pluralize

Specifies a message to display according to en-us localization rules.

ng-transclude

Specifies a point to insert transcluded elements.

ng-href

Specifies a url for the <a> element.

ng-form

Specifies an HTML form to inherit controls from.

ng-click

Specifies an expression to evaluate when an element is being clicked.

ng-change

Specifies an expression to evaluate when content is being changed by the user.

ng-submit

Specifies expressions to run on onsubmit events.

ng-model-options

Specifies how updates in the model are done.

ng-checked

Specifies if an element is checked or not.

ng-disabled

Specifies if an element is disabled or not.

ng-non-bindable

Specifies that no data binding can happen in this element, or its children.

ng-jq

Specifies that the application must use a library, like jQuery.

ng-bind-template

Specifies that the text content should be replaced with a template. Unlike the ng-bind, this can take multiple {{}} elements. (ng-bind just takes the string itself)

ng-maxlength

Specifies the maximum number of characters allowed in the input field.

ng-minlength

Specifies the minimum number of characters allowed in the input field.

ng-open

Specifies the open attribute of an element.

ng-readonly

Specifies the readonly attribute of an element.

ng-required

Specifies the required attribute of an element.

ng-selected

Specifies the selected attribute of an element.

ng-src

Specifies the src attribute for the <img> element.

ng-srcset

Specifies the srcset attribute for the <img> element.

ng-style

Specifies the style attribute for an element.

ng-value

Specifies the value of an input element.

What is two-way binding? How to bind data both ways?

Two-way binding means that if the component property is modified inside the component (JavaScript) or inside our web page (HTML), it will stay in sync. 1: Bind the input value to a property. We need to listen for the input event on our input box. <input type="text" [value]="part.qty" (input)="part.qty =$event.target.value" 2: Using [(ngModel)] allows us to have one command to express two-way data binding. You can only use it for data bound properties, like form fields. It won't work if you use it for a method. <input type="text" [(ngModel)]="part.qty">

What services are used for?

To organize and share code across your app, and where we create our data access methods. http calls

Why is good to build a model for our up? How to build a model in TypeScript?

TypeScript helps to be more object oriented with our data, can use classes to model our data. Can specify class property types. This will allow our compiler to check our code and ensure we're getting and setting things properly. If we use the wrong property names compiler would throw an error. - Create a new file - Create a JS class with export(so it can be imported) - Add your data properties and declare a type for each - Import your model to your component file - Use your model Class name with []: Tells the type Script to treat this like an array of CarParts. * Good practice to keep mock data separate from your model and your components, in it's own file.

How to format screen data?

Use pipe: Takes in data as input and transforms it to a desired output. (lowercase, date, number, decimal, replace, slice, json) You can create your custom pipes.

What is dependency injection? How to use it?

We use dependency injection to create and send services to the classes that need them. @Injectable() We give our dependency injector providers so that it knows what classes it can create and send for us. We ask for dependencies by specifying them in our class constructor.

That is the import and what bootstrap function used for?

import { bootstrap } from '@angular/platform-browser-dynamic'; Import: ES2015 feature (imports fn, obj, primitives) bootstrap: Instantiates Angular 2 app.

What is ngOnInit function?

ngOnInit is invoked after the component is constructed and is the best place to initialize property values. Easier to test.