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.