Angular2 Notes IV

1. 1. Shadow DOM
2. 2. Bootstrap Datepicker
3. 3. Bootstrap Dropdown Button
4. 4. Simple Cache Implementation
5. 5. Resource Relative Path
6. 6. Dynamic Base Href
7. 7. Cross Origin Problem

• Shadow DOM

  In fact, Angular doesn’t use native Shadow DOM by default, it uses an emulation. Most browsers simply don’t support Shadow DOM yet, but we should still be able to use the framework. Even better, we can easily tell Angular to use the native Shadow DOM if we want, View Encapsulation in Angular.

View Encapsulation Types
Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:

• ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation.
• ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation.
• ViewEncapsulation.Native - Native Shadow DOM with all it’s goodness.

To make that Angular doesn’t use Shadow DOM at all. In case adding some attributes to the style so that the style is not rendered well in the browser.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
    selector: 'app-period',
    templateUrl: './period.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./period.component.scss']
})

• Bootstrap Datepicker

import {DatePickerModule} from 'ng2-datepicker';
import {NKDatetimeModule} from 'ng2-datetime/ng2-datetime'

import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';

<div class="col-md-3 no-padding">
    <datetime [(ngModel)]="fromDate" [timepicker]="false" [datepicker]="fromDateOptions"
              name="dpFromDate" id="dpFromDate" (ngModelChange)="onSelectedDates()">
    </datetime>
</div>

Example of datepicker options…

this.toDateOptions = {
            autoclose: true,
            assumeNearbyYear: true,
            format: 'dd-mm-yyyy',
            language: 'en',
            todayBtn: 'linked',
            todayHighlight: true,
            weekStart: 1,
            icon: 'fa fa-calendar'
        };

• Bootstrap Dropdown Button

import { ButtonsModule, DropdownModule } from 'ng2-bootstrap';

@NgModule({
    imports: [
        //...
        ButtonsModule.forRoot(),
        DropdownModule.forRoot(),
        //...
    ],
    providers: ...,
    declarations: ...
})

 <div class="btn-group" dropdown>
    <button id="dropdown-btn-curr" class="btn btn-secondary" dropdownToggle>
        &nbsp; {{currDefault}} &nbsp;
        <i class="fa fa-caret-down"></i>
    </button>
    <ul dropdownMenu role="menu" aria-labelledby="dropdown-btn-curr">
        <li role="menuitem" *ngFor="let curr of currCodeList" >
            <a (click)="onCurrencySelected(curr)" class="dropdown-item">{{curr}}</a>
        </li>
    </ul>
</div>

• Simple Cache Implementation

export class TopWinnerService {
    pathWinningAmount:string = '/winning-amount';

    _listWinningAmount = null; //enable cache for winners' list

    constructor(private apiService:ApiService) {
    }

    getWinningAmount(params:URLSearchParams) {
        if(this._listWinningAmount == null) {
        console.log('no cache::_listWinningAmount...');
        this._listWinningAmount = this.apiService.query('', this.pathWinningAmount, params)
            .publishReplay(1)
            .refCount();
        }
        return this._listWinningAmount;
    }

    clearCache() {
        this._listWinningAmount = null;
    }
}

• Resource Relative Path

logo = require("../../assets/img/03.png");

• Dynamic Base Href

<base href="./">

• Cross Origin Problem

  Add an @CrossOrigin annotation to @RestController or @RequestMapping annotated handler method in order to enable CORS on it. By default @CrossOrigin allows all origins and the HTTP methods specified in the @RequestMapping annotation, CROS Support. E.g.,

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)

Ref:

1. View Encapsulation in Angular
2. CROS Support