Fudamentals Flashcards

Question

What are the types of Angular Data-Binding?

Answer 1

Component (source) DOM (view) {{value}} Component —> DOM **Interpolation** [property] = “Value” Component —> DOM (sending a value to an element’s property in the DOM) **Property binding** (event) = “handler” DOM —> Component **Event binding** [(ng-model)] = “property” DOM <—> Component

Answer 2

A two-way binding When we use both the square and normal parentheses. But we can use either by its own [(ng-model)] = “property” The normal parenthesis would bind from DOM to Component The square parenthesis would bind from Component to DOM

Answer 3

Allows you to declare display value transforms in your template HTML Meaning you can perform a transforming function on your data in a interpolative binding, to modify or format that value. {{interpolated_value | pipe_name }} There are built-in pipes or you can make your own with the @Pipe decorator

Answer 4

Used in bindings to prevent a compile error if the value is NULL. Can add the operator in with a ? before the full stop {{ event?.location?.name }} (The above is accessing a Json object so multiple levels could be null)

Answer 5

Technically yes, but because they are distinct enough in Angular they are defined with the decorator @Component. The @Component extends the @Directive with template-oriented features

Answer 6

A class that can modify the attributes in the DOM or its structure, as well as Component data. They typically start with the ng prefix, i.e that *ngFor=“ “. This is a short-hand syntax that Angular interprets and converts to longer form (using ) A directive class definition must have the @Directive decorator (to supply the metadata) It is usually associated with a HTML element or attribute. When Angular finds a directive in an HTML template, it creates an instance of a matching directive class. It then gives it control over that portion of the browser DOM

Answer 7

*ngIf - Use lowerCamelCase when the directive applies to the html attribute *NgIf - Use UpperCamelCase for when referring to the directive class, i.e, describing its behaviour & properties

Answer 8

**Attribute Directives** - can modify behaviour and appearance of HTML elements, attributes, properties and Components. Can be added in the template as a css attribute to that element. **Structural Attributes** - can modify the structure of the DOM, such as adding, removing or manipulating elements. Such as *ngFor **Components** - they use the @Component decorator which is an extension of the @Directive class

Answer 9

Will import the Directive class and have the @Directive decorator. The Selector will be in square parentheses because its references as a HTML attribute and not an element (like Components) Will also typically import the ElementRef class and have this in the structure to access the element its being applied to. Constructor(ref:ElementRef) { this.myEle = ref.nativeElement }

Answer 10

Using the @Input and @Output decorators

Answer 11

The @Input decorator The @Input is defined in the child component and then declared within the html selector used in the parent (calling) component **Child**: (Imports ‘Input’) Selecttor: ‘child-app’ export class childComponent { @Input( ) item = ‘ ’ } **Parent**: template:

Answer 12

The @Output decorator The @Output is defined in the child component. It lets the parent component now that the property has change with an Event sent using the EventEmitter. Which allows the user to create a custom event **Child**: (Imports ‘EventEmittet’ and ‘Output) Selector: ‘childApp’ export class childComponent { @Output( ) newEvent = new EventEmitter( ) doSomething(value:string) { this.newEvent.emit(value) } Template: ‘ ’ } **Parent**: export class parentComponent { parentMethod(item:string) { //do something } template: < /child-app>

Answer 13

Used to reference data from one section of your template, in another section. Often declared with the # symbol Could refer to: -a DOM element within a template -a directive or component -templateRef -web components **Common example** **Other example** The template var would be the temp variable defined in the ngFor

….

Where ‘item’ is the template var

Answer 14

Used to assign CSS classes to the template html. Classes be assigned in an array, a single string or delimited (space) string or via an object when a value evaluates to truthy [ngClass]=“{‘class1 class2’: true”}

Answer 15

Applies styles to template html elements

Answer 16

@Component @Directive @Pipe @Injectable @NgModule