Module
Container
take the logic
Data Binding
- [(ngModel)] = “property” : binding input property with handling model
Typescript and Angular Decorators
Typescript Decorators
www.typescriptlang.org/docs/handbook/decorators.html
Documentation - Decorators
TypeScript Decorators overview
www.typescriptlang.org
- meta programming changing target without modifying metadata (classes)
- annotate or modify the target
labelling the target
@function: function decorator, decorator creater(factory)
- return function (target) => put class into the target
- return what you decorate (classDecorator -> return class info …)
…toppings: string[] –> toppings = [‘tomato’, ‘mozzarella’, ‘basil’]
memoize() : // _.memoize(func)
Memoizes a given function by caching the computed result.
Useful for speeding up slow-running computations.
You may assume that the memoized function takes only one argument and that it is a primitive.
Memoize should return a function that when called, will check if it has already computed the result for the given argument and return that value instead of recomputing it.
Object Properties
How to define a property?
ob.foo = ‘bar’; // direct
// Object.defineProperty(obj, ‘foo’, {value: ‘bar’}); //(ppt, ppt_name, object// describe the behaviour of the ppt //ppt_value)
Attribute name
- Value (Any type) // actual value
// default values of 3 boolean functions of defineProperty(): false // if we define obj with assigning it, then default == true !!! - Writable (Boolean) // whether the property value can be changed or not
- Enumerable (Boolean) // makes it appear to be in loops (listed in ‘for-in’ enumeration)
// 💥 Is Array enumerable? - Configurable (Boolean) // +Writable +Enumerable // whether we can delete the property or change any attribute apart from attr // configurable lets us change the writable property, writable lets us change the value property
Angular Decorators
Component
target: class MyComponent
Injectable
Input
@Input: input decorator => able to pass the value from parent template using the tag to the child component class
Output
@Output: output decorator => sen the info to the parent element
💥 Child’s view
input is meant to receive information from the parent element
output is meant to send info to the parent