Author: zero2full
Section 9 Service
Service file is wrote by TypeScript, and don’t need to add decorator @, but if the current service file is need to inject other service from other service file, it need to add decorator: @Injectable(). So right now Angular suggests add @Injectable() in any service files, no matter what it is needed to inject or
Section 7 Directive & @HostListener & @HostBinding
ng generate directive directvie-name ng g d directive-name @Directive({selector: ‘[directiveName]’}) export class directiveNameDirective {} @Directive({ selector: ‘[appHighlight]’ }) export class HightlightDirective implements OnInit { constructor(private elementRef: ElementRef){} ngOnInit() { this.elementRef.nativeElement.style.backgroundColor = ‘gree’; //this will overwrite the style of the element that uses the attribute ‘appHighlight’ } } @Directive({ selector: ‘[appBetterHighlight]’ }) export class BetterHighlightDirective implements
Section 5 – 73 Local references & @ViewChild() & @ContentChild() decorator
You can put local references in any template of your angular app, and start with #, such as <input type=”text” id=”test” #localReference>, so you can only use this local reference in this template but not in typescript. Notice, this local reference represents the whole element, such as #localReference represent the whole input element that includes
ç Data Binding @Input(‘alias name’) & @Outpu()
The properties of components you create can only be used in this component inside, such as: export class RecipeListComponent implements OnInit { recipes: Recipe[] = [ new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’), new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’) ]; constructor() { } ngOnInit(): void { }} in
BitBucket – Gitflow Workflow
Master branch: only contain complete history of project, and only include abridged version Develop branch: cloned from Master branch, and served as develop process, and merge other feature branches Feature branch: cloned from Develop branch, never directly interacted with master branch. And serve as developing new features for the project, and after finished coding, this
viewport meta tag
<meta name=”viewport” content=”width=device-width, initial-scale=1″> The idea is to set up a virtual viewport for the page (“layout viewport“) that fit the small screen of mobile or tablet (“visual viewport“) (normally equal to the width of the device, in this case, it is said this is “idea viewport“), which could let the full page completely renders
Section 2-5 Attribute Directives
ngStyle: accept object with key-value pair, key is CSS property name, such as backgroudColor; value is CSS property value, and if this value is string, you have to use single quotation marker (this is not as normal CSS syntax, because Angular will treat content in double quotation marker as angular syntax), so for value part,
Section 2-5 Structure Directives
*ngIf: only display element when the condition is true, such as: *ngIf = “condition” *ngFor: repeat display element for several time, such as: *ngFor = “let elem of elements; let i = index”, elements is an array, elem represent each element of an array from index 0, index is the index of an array
Section 2-4 Data binding
String Interpolation: {{data}} Property Binding: [property]=”data” Event Binding: (event)=”expression” Two-Way-Binding: [(ngModel)]=”data” String Interpolation: {{data}}, in double curly brace, you can use property, expression that will return a string, or method that return string. Remember, in in double curly brace, you can use anything that return a string or can be converted into a string, however,
Angular Issues
1. Could not find module “@angular-devkit/build-angular” Answer: npm install; ng update; npm update 2. If you try to access CSS selectors in Angular, sometime these selectors are encapsulated, you can use: “:host ::ng-deep selector name” or “:host /deep/ selector name” to access it. (https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep) 3. @ViewChild() is always available in ngAfterViewInit (lifecycle). That is