How to use @angular/core - 10 common examples

}

@Injectable()
class MockCommonUtilsService {}

@Directive({ selector: '[oneviewPermitted]' }) // TODO, template must be user-configurable
class OneviewPermittedDirective {
  @Input() oneviewPermitted;
}

@Pipe({name: 'translate'}) // TODO, template must be user-configurable
class TranslatePipe implements PipeTransform {
  transform(value) { return value; }
}

@Pipe({name: 'phoneNumber'}) // TODO, template must be user-configurable
class PhoneNumberPipe implements PipeTransform {
  transform(value) { return value; }
}

@Pipe({name: 'safeHtml'}) // TODO, template must be user-configurable
class SafeHtmlPipe implements PipeTransform {
  transform(value) { return value; }
}

describe('ExampleComponent', () => {
  let fixture;
  let component;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule, ReactiveFormsModule ],

selector: '[sf-click]'
})
export class SfClickDirective {

  @Input('not') excludeText: string;
  @Input('group') groupText: string;

  @Output('sf-click') _validateEvent: EventEmitter = new EventEmitter();


  private validationResult = _DEFAULT_RESULT;

  constructor(private _el: ElementRef, private _injector: Injector, private _ngForm: NgForm) { }


  @HostListener('click', ['$event'])
  private onClick(event) {
    // this._ngForm.form.markAsPristine({});
    // console.log(this._ngForm);
    // console.log(this.excludeText);
    // console.log(this.groupText);

    event['validate'] = () => { return this.validate() };
    event['reset'] = () => { return this.reset() };
    this._validateEvent.emit(event);
  }

  public validate() {
    this.validationResult["validationSummaryMsgs"].length = 0;
    this.validationResult.isValid = true;
    let maps;
    if(this.groupText !== undefined) {

// provide a better mock
            {
                provide: ActivatedRoute,
                useValue: {
                    data: {
                        subscribe: (fn) => fn({
                            yourData: 'yolo'
                        })
                    }
                }
            },
            Profile
        ]
    }));
    
    it('should log ngOnInit', inject([Profile], (profile) => {
        spyOn(console, 'log');
        expect(console.log).not.toHaveBeenCalled();
        
        profile.ngOnInit();
        expect(console.log).toHaveBeenCalled();
    }));
    
});

writeValue(value: any): void {
        if (value !== null) {
            this.values = value;
        }

        this.checked = this.values.indexOf(this.value) >= 0;
        super.writeValue(this.checked);

        // console.log('writeValue: id=' + this.id + ', name=' + this.name
        //  + ', values=' + JSON.stringify(this.values) + ', checked=' + this._value);
    }

    /**
     * 扩展样式
     */
    @HostBinding('class') get hostCls(): string {
        return [super.getBasicControlCls(), 'weui-check__label', (this.additionalCls || '')].join(' ');
    }

    constructor(private renderer: Renderer, private elementRef: ElementRef) {
        super(renderer, elementRef);
        this.value = 'on'; // default value
    }

}

/* tslint:disable-next-line:directive-selector */
  selector: 'a[href]'
})
export class LinkDirective implements OnChanges {

  // We need both these decorators to ensure that we can access
  // the href programmatically, and that it appears as a real
  // attribute on the element.
  @Input()
  @HostBinding()
  href: string;

  @HostBinding()
  target: string;

  @HostListener('click', ['$event'])
  onClick($event) {
    if (this.isAbsolute(this.href)) {
      return true;
    } else {
      this.location.go(this.href);
      return false;
    }
  }

  private isAbsolute(url) {
    return /^[a-z]+:\/\/|\/\//i.test(url);
  }

  constructor(private location: LocationService) { }

  ngOnChanges() {

}

    this._itemsDiffer = this._iterableDiffers.find(this.items).create();
  }

  initFocus() { }

  enableIonItem(isEnabled: boolean) {
    if (!this.ionItem) {
      return;
    }

    this.ionItem.setElementClass('item-input-disabled', !isEnabled);
  }

  @HostListener('click', ['$event'])
  _click(event: UIEvent) {
    if (!this.isEnabled || event.detail === 0) {
      // Don't continue if the click event came from a form submit.
      return;
    }

    this._label = this._getLabelText();
    event.preventDefault();
    event.stopPropagation();
    this.open().then(() => {
      this.onOpen.emit({
        component: this
      });
    });
  }

}

@Component({
  encapsulation: ViewEncapsulation.None,
  providers: [
    {
      multi: true,
      provide: NG_VALUE_ACCESSOR,
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      useExisting: forwardRef(() => QuillEditorComponent)
    },
    {
      multi: true,
      provide: NG_VALIDATORS,
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      useExisting: forwardRef(() => QuillEditorComponent)
    }
  ],
  selector: 'quill-editor',
  template: `
  
`
})
export class QuillEditorComponent implements AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {

  static normalizeClassNames(classes: string): string[] {
    const classList = classes.trim().split(' ')
    return classList.reduce((prev: string[], cur: string) => {
      const trimmed = cur.trim()
      if (trimmed) {
        prev.push(trimmed)
      }

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig } from 'projects/sample/src/app/auth-code-flow.config';
import { filter } from 'rxjs/operators';
import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Quickstart Demo';

  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndLogin();

    // Automatically load user profile
    this.oauthService
        .events
        .pipe(filter(e => e.type === 'token_received'))
        .subscribe(_ => this.oauthService.loadUserProfile());

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { IntroPage } from '../pages/intro/intro';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = IntroPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }

list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Modal with component'
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

/* This is a component which we pass in modal*/

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>
      <button aria-label="Close" class="close pull-right" type="button">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <ul>
        <li>{{item}}</li>
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button">{{closeBtnName}}</button>
    </div>