@angular/core#ViewEncapsulation TypeScript Examples

@Component({
  selector: 'lg-accordion-panel-heading',
  templateUrl: './accordion-panel-heading.component.html',
  styleUrls: [ './accordion-panel-heading.component.scss' ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LgAccordionPanelHeadingComponent implements AfterViewChecked {
  @Input() headingLevel: HeadingLevel;
  @Input()
  get isActive() {
    return this._isActive;
  }
  set isActive(isActive: boolean) {
    this._isActive = isActive;
    this.cdr.markForCheck();
  }
  @Output() toggleActive = new EventEmitter<boolean>();

  _id = nextUniqueId++;
  _toggleId = `lg-accordion-panel-heading-${this._id}`;
  _panelId = `lg-accordion-panel-${this._id}`;
  _isActive = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewChecked() {
    this.cdr.detectChanges();
  }

  toggle() {
    this.isActive = !this.isActive;
    this.toggleActive.emit(this.isActive);
  }
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class LoginComponent implements OnInit {
  public username: string;
  public password: string;
  public hide = true;

  constructor(
    private connectionService: ConnectionService,
    private router: Router
  ) {
  }

  ngOnInit(): void {
    return;
  }

  submit(): void {
    this.connectionService
      .login({
        username: this.username,
        password: this.password
      })
      .then(({token}: any) => {
        if (token) {
          new Token().set(token);
          this.router.navigateByUrl(DashboardRouter.redirectToList());
        }
      });
  }
}

@Component({
  selector: 'fa-root',
  template: `<router-outlet (deactivate)="clearAlert()"></router-outlet>`,
  styleUrls: ['./fire-admin.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FireAdminComponent implements OnInit, OnDestroy {

  constructor(private alert: AlertService, private currentUser: CurrentUserService) { }

  ngOnInit() {
  }

  ngOnDestroy() {
    this.currentUser.unsubscribe();
  }

  clearAlert() {
    if (! this.alert.isPersistent) {
      this.alert.clear();
    }
  }

}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  public topNavLinks: Array<{
    path: string,
    name: string
  }> = [];
  @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navdrawer: IgxNavigationDrawerComponent;

  constructor(private router: Router) {
    for (const route of routes) {
      if (route.path && route.data && route.path.indexOf('*') === -1) {
        this.topNavLinks.push({
          name: route.data.text,
          path: '/' + route.path
        });
      }
    }
  }

  public ngOnInit(): void {
    this.router.events.pipe(
      filter((x) => x instanceof NavigationStart)
    )
      .subscribe((event: NavigationStart) => {
          if (event.url !== '/' && !this.navdrawer.pin) {
              // Close drawer when selecting a view on mobile (unpinned)
              this.navdrawer.close();
          }
      });
  }
}

@Component({
  selector: 'lg-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: [ './accordion.component.scss' ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ { provide: LG_ACCORDION, useExisting: LgAccordionComponent } ],
})
export class LgAccordionComponent implements AfterContentInit {
  @HostBinding('class.lg-accordion') class = true;
  @HostBinding('id') @Input() id = `lg-accordion-${nextUniqueId++}`;
  @Input() headingLevel: HeadingLevel;
  @Input() multi = true;

  @ContentChildren(forwardRef(() => LgAccordionPanelHeadingComponent), {
    descendants: true,
  })
  panelHeadings: QueryList<LgAccordionPanelHeadingComponent>;

  ngAfterContentInit() {
    this.panelHeadings.forEach(panelHeading => {
      panelHeading.headingLevel = this.headingLevel;
    });
  }
}

@Component({
  selector: 'm-modal',
  host: {
    '[hidden]': 'hidden',
  },
  inputs: ['open', 'allowClose'],
  outputs: ['closed'],
  styleUrls: ['./modal.component.scss'],
  encapsulation: ViewEncapsulation.None,
  templateUrl: './modal.component.html',
})
export class Modal {
  allowClose: boolean = true;
  hidden: boolean = true;
  closed: EventEmitter<any> = new EventEmitter();

  set _hidden(value: boolean) {
    this.hidden = value;
  }

  set open(value: boolean) {
    this.hidden = !value;
  }

  close(event) {
    if (!this.allowClose) return;

    this.hidden = !this.hidden;
    this.closed.next(true);
    event.stopPropagation();
  }
}

@Component({
  selector: "app-update-dialog",
  templateUrl: "./update-dialog.component.html",
  styleUrls: ["./update-dialog.component.scss"],
  encapsulation: ViewEncapsulation.None,
})
export class UpdateDialogComponent implements OnInit {
  @Input()
  version: string;
  @Input()
  releaseDate: string;
  @Input()
  releaseNotes: string;
  @Input()
  callback: any;

  /* Just a restyled modal to show a confirmation for delete actions */
  constructor(private bsModalRef: BsModalRef) {}

  ngOnInit(): void {}

  close(): void {
    this.remindMeLater();
  }

  remindMeLater(): void {
    if (this.callback) {
      this.callback(constants.confirmClosedAndIgnoreUpdate);
    }
    this.bsModalRef.hide();
  }

  goToDownloadPage(): void {
    if (this.callback) {
      this.callback(constants.confirmCloseAndDownloadUpdate);
    }
    this.bsModalRef.hide();
  }
}

@Component({
  selector: 'app-the-amazing-list-item',
  templateUrl: './the-amazing-list-item.component.html',
  styleUrls: ['./the-amazing-list-item.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    tabindex: '-1',
    role: 'list-item',
  },
})
export class TheAmazingListItemComponent implements OnInit, FocusableOption {
  @Input() item: Partial<AppUserCard>;
  constructor(private el: ElementRef) {}

  focus() {
    this.el.nativeElement.focus();
  }

  ngOnInit(): void {}
}

@Component({
  selector: 'aui-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  preserveWhitespaces: false,
})
export class AccordionComponent extends CdkAccordion {
  @Input()
  background = true;

  @HostBinding('attr.accordion-depth')
  depth: number;

  constructor(
    @SkipSelf()
    @Optional()
    public parent: AccordionComponent,
  ) {
    super();
    this.depth = parent ? parent.depth + 1 : 0;
  }
}