How to use @angular/common - 10 common examples

onRangeChange(): void {
        const start = this.start ? formatDate(this.start, 'd MMMM y  h:mm a', 'en-US') + ' ' + this._startTimezone.name : '';
        const end = this.end ? formatDate(this.end, 'd MMMM y  h:mm a', 'en-US') + ' ' + this._endTimezone.name : '';

        if (!this.start || !this.end) {
            return;
        }

        // reset the invalid state
        this.invalid = false;

        // check if the dates are valid
        if (this.getNormalizedDate(this.start, this._startTimezone).getTime() > this.getNormalizedDate(this.end, this._endTimezone).getTime()) {
            this.invalid = true;
        }

        // concatenate the two dates
        this.date = start && end ? `${start} — ${end}` : start || end;

ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.initFullpage();
    }
    if (isPlatformServer(this.platformId)) {
      // server side code
    }
  }

transform(
    typedResource: TypedResourceView,
    forced_type: enums.resourceType = null,
    seperator: string = ', ',
    standalone: boolean = false,
  ): string {
    if (!typedResource) { return '(no resource)'; }
    /* Suffix for contributors, use colon (:) in standalone variants, else a comma (,) */
    const contrib_suffix = standalone ? ': ' : ', ';
    const identifierPepe = new IdentifierPipe();
    const authorsPepe = new AuthorsPipe();
    const editorsPepe = new EditorsPipe();
    const publisherPepe = new PublisherPipe();
    const datePepe = new DatePipe('en'); // locale
    let standardString = '';
    let trv = typedResource;
    if (forced_type != null) {
      // Change the view on the resource to the forced type
      trv = trv.astype(forced_type);
    }
    const title = typedResource.title
    const subtitle = typedResource.subtitle
    const publicationDate = typedResource.publicationDate
    // console.log('Date for title', title, publicationDate);
    const isoPublicationDate = datePepe.transform(publicationDate, 'yyyy');
    // console.log('YYYY date', title, isoPublicationDate);
    const contributors = typedResource.contributors;
    const authors = authorsPepe.transform(contributors, '; ', contrib_suffix);
    const editors = editorsPepe.transform(contributors, '; ', contrib_suffix);
    const publisher = publisherPepe.transform(contributors);

public onClickOpenQueryModal(queryData: QueryHistory): void {
    const log: Log = new Log;
    const datePipe = new DatePipe('en-EN');
    log.title = 'QUERY';
    log.subTitle = [];
    // 생성시간 | 소요시간 | 성공여부
    log.subTitle.push(datePipe.transform(queryData.queryStartTime, 'yyyy-MM-dd HH:mm'));
    log.subTitle.push(queryData.queryTimeTakenFormatted);
    log.subTitle.push(queryData.queryResultStatus.toString());
    log.data = queryData.query;
    log.isShowCopy = true;
    // log 모달 오픈
    this.logEditorComponent.init(log);
  }

latitude: 35,
      longitude: -105
    };

    // Success Response
    feltResponseSucces = {
      ciim_mapLat: '35',
      ciim_mapLon: '-105',
      ciim_time: 'five minutes ago',
      eventid: '1234abcd',
      form_version: '1.2.3',
      your_cdi: 'I'
    };

    // Error Response
    feltResponseError = new HttpErrorResponse({
      status: 500,
      statusText: 'Server Error'
    });

    it('handles successes', inject(
      [FormSubmitService],
      (service: FormSubmitService) => {
        service.onSubmit(feltReport);
        const req = httpClient.expectOne(service.responseUrl);
        req.flush(feltResponseSucces);

        service.formResponse$.subscribe(response => {
          expect(response).toEqual(feltResponseSucces);
        });
      }
    ));

injectNewHosts(serviceTemplateURL: string, completionSelection: any): Promise {
        const postURL = new Path(serviceTemplateURL)
            .append('injector')
            .append('replace')
            .toString();
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            }),
            observe: 'response'
        };
        this.logger.log('[deployment-completion.service][injectNewHosts][request-url]', JSON.stringify(postURL));

        // Todo See how to implement observe: 'response' application-management.service line 166
        // @ts-ignore
        return this.http.post>(postURL, completionSelection, httpOptions)
            .toPromise()
            .then(response => {
                const injectedserviceTemplateURL = response.headers.get('Location') as string;
                this.logger.log('[deployment-completion.service][injectNewHosts][response-location]', response.headers.get('Location'));
                return injectedserviceTemplateURL;
            });
    }

// Add click event to the image
              this._renderer.setStyle(img, 'cursor', 'pointer');
              this._renderer.setProperty(img, 'onclick', () => this._lightbox.open(i, this.gallerize));
              return img;
            }),
            tap((img: HTMLImageElement) => images.push(new ImageItem(img.src, img.src))),
            finalize(() => galleryRef.load(images))
          );
        } else {
          return empty();
        }
      })
    ).subscribe();

    // Observe content changes
    if (isPlatformBrowser(this.platform)) {
      this.observer = new MutationObserver(() => this.gallerizer$.next());
      this.observer.observe(this._el.nativeElement, { childList: true, subtree: true });
    }
  }

lookupStyle(element, styleName, inlineOnly = false) {
        /** @type {?} */
        let value = '';
        if (element) {
            /** @type {?} */
            let immediateValue = value = this.lookupInlineStyle(element, styleName);
            if (!immediateValue) {
                if (isPlatformBrowser(this._platformId)) {
                    if (!inlineOnly) {
                        value = getComputedStyle(element).getPropertyValue(styleName);
                    }
                }
                else {
                    if (this._serverModuleLoaded) {
                        value = this._serverStylesheet.getStyleForElement(element, styleName);
                    }
                }
            }
        }
        // Note: 'inline' is the default of all elements, unless UA stylesheet overrides;
        //       in which case getComputedStyle() should determine a valid value.
        return value ? value.trim() : '';
    }
    /**

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {registerLocaleData} from '@angular/common';
import {Component} from '@angular/core';
// we need to import data for the french locale
import localeFr from './locale-fr';

// registering french data
registerLocaleData(localeFr);

// #docregion NumberPipe
@Component({
  selector: 'number-pipe',
  template: `<div>
    
    <p>e (no formatting): {{e | number}}</p>
    
    
    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>

    
    <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
    
    
    <p>e (french): {{e | number:'4.5-5':'fr'}}</p></div>

import localeCs from '@angular/common/locales/cs';
import localePl from '@angular/common/locales/pl';
import localeFi from '@angular/common/locales/fi';
import localeDa from '@angular/common/locales/da';
import localeSv from '@angular/common/locales/sv';

registerLocaleData(localeFr);
registerLocaleData(localeDe);
registerLocaleData(localeIt);
registerLocaleData(localeEs);
registerLocaleData(localeJa);
registerLocaleData(localeNl);
registerLocaleData(localePt);
registerLocaleData(localeNb);
registerLocaleData(localeRu);
registerLocaleData(localeCh);
registerLocaleData(localeAr);
registerLocaleData(localeCs);
registerLocaleData(localePl);
registerLocaleData(localeFi);
registerLocaleData(localeDa);
registerLocaleData(localeSv);

@NgModule({
  imports: [
    BrowserModule,
    environment.e2e ? NoopAnimationsModule : BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(APP_ROUTES, {
      useHash: true,
      enableTracing: false // enable for debug only