@angular/cdk/layout#Breakpoints TypeScript Examples

The following examples show how to use @angular/cdk/layout#Breakpoints. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: app.component.ts    From barista with Apache License 2.0 6 votes vote down vote up 
ngOnInit(): void {
    this.breakpointObserver
      .observe(Breakpoints.Handset)
      .pipe(map(result => result.matches))
      .subscribe(result => {
        this.isHandset = result;
      });

    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.showHeader = this.activatedRoute.firstChild.snapshot.data.showHeader !== false;
        this.showSidebar = this.activatedRoute.firstChild.snapshot.data.showSidebar !== false;
        this.showFooter = this.activatedRoute.firstChild.snapshot.data.showFooter !== false;
      }
    });
  }
Example #2
Source File: playground.component.ts    From taiga-front-next with GNU Affero General Public License v3.0 6 votes vote down vote up 
ngOnInit(): void {
    this.breakpointObserver
    .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
    .subscribe((state: BreakpointState) => {
      console.log(state);
    });

    this.exampleForm = this.fb.group({
      isChecked: new FormControl(false, Validators.required),
    });

    this.initData();
  }
Example #3
Source File: breakpoint-overlay.component.ts    From storm with MIT License 5 votes vote down vote up 
constructor(breakpointObserver: BreakpointObserver) {
    // Breakpoint observable to switch the view to small handset view
    this.$breakpoint = breakpointObserver.observe(
      [Breakpoints.Small, Breakpoints.HandsetPortrait]
    ).pipe(
      map(state => state.matches)
    );
  }
Example #4
Source File: nav.component.ts    From WiLearning with GNU Affero General Public License v3.0 5 votes vote down vote up 
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );
Example #5
Source File: root.component.ts    From blockcore-hub with MIT License 4 votes vote down vote up 
// TODO: Change into Observable.
    // get userActivated(): boolean {
    //   return this.authService.authenticated;
    // }

    constructor(
        private readonly titleService: TitleService,
        private readonly authService: AuthenticationService,
        public appState: ApplicationStateService,
        public appModes: AppModes,
        private electronService: ElectronService,
        private router: Router,
        private log: Logger,
        public updateService: UpdateService,
        public detailsService: DetailsService,
        public settings: SettingsService,
        private apiService: ApiService,
        private walletService: WalletService,
        public wallet: WalletService,
        private readonly cd: ChangeDetectorRef,
        public dialog: MatDialog,
        private ngZone: NgZone,
        private storage: StorageService,
        public chains: ChainService,
        public notifications: NotificationService,
        public globalService: GlobalService,
        private zone: NgZone,
        private readonly breakpointObserver: BreakpointObserver,
    ) {
        this.log.info('Expanded:', localStorage.getItem('Menu:Expanded'));

        this.loadFiller();

        this.isAuthenticated = authService.isAuthenticated();

        if (this.electronService.ipcRenderer) {
            this.appState.setVersion(APP_VERSION);
            this.log.info('application version: ', this.appState.version);
            this.ipc = electronService.ipcRenderer;
            this.ipc.on('daemon-exiting', (event, error) => {
                this.log.info('daemon is currently being stopped... please wait...');
                this.appState.shutdownInProgress = true;
                this.cd.detectChanges();

                // If the exit takes a very long time, we want to allow users to forcefully exit Blockcore Hub.
                setTimeout(() => {
                    this.appState.shutdownDelayed = true;
                    this.cd.detectChanges();
                }, 60000);
            });

            this.ipc.on('daemon-exited', (event, error) => {
                this.log.info('daemon is stopped.');
                this.appState.shutdownInProgress = false;
                this.appState.shutdownDelayed = false;

                // Perform a new close event on the window, this time it will close itself.
                window.close();
            });

            this.ipc.on('daemon-changing', (event, error) => {
                this.zone.run(() => {
                    this.log.info('daemon change is requested and shutdown was successful.');
                    this.cd.detectChanges();

                    // Navigate again to hide the loading indicator.
                    // if (!this.appState.isChangingToChain) {
                    this.router.navigate(['/load']);
                    // }

                    this.cd.detectChanges();
                });
            });

            this.ipc.on('daemon-error', (event, error) => {

                this.log.error(error);

                const dialogRef = this.dialog.open(ReportComponent, {
                    data: {
                        title: 'Failed to start node background daemon',
                        error,
                        lines: this.log.lastEntries()
                    }
                });

                dialogRef.afterClosed().subscribe(result => {
                    this.log.info(`Dialog result: ${result}`);
                });
            });

            this.ipc.on('log-debug', (event, msg: any) => {
                this.log.verbose(msg);
            });

            this.ipc.on('log-info', (event, msg: any) => {
                this.log.info(msg);
            });

            this.ipc.on('log-error', (event, msg: any) => {
                this.log.error(msg);
            });
        }

        // Upon initial load, we'll check if we are on mobile or not and show/hide menu.
        const isSmallScreen = breakpointObserver.isMatched(Breakpoints.HandsetPortrait);

        this.menuOpened = !isSmallScreen;

        breakpointObserver.observe([
            Breakpoints.HandsetPortrait
        ]).subscribe(result => {
            if (result.matches) {
                appState.handset = true;
                this.handset = true;
                this.menuMode = 'over';
                this.showFiller = true;
            } else {
                appState.handset = false;
                this.handset = false;
                this.menuOpened = true;
                this.menuMode = 'side';
                this.loadFiller();
            }
        });

        this.authService.isAuthenticated().subscribe(auth => {
            if (auth) {
                this.updateNetworkInfo();
            } else {
            }
        });

        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }

            const contentContainer = document.querySelector('.app-view-area-main') || window;
            contentContainer.scrollTo(0, 0);
        });
    }
Example #6
Source File: root.component.ts    From EXOS-Core with MIT License 4 votes vote down vote up 
// TODO: Change into Observable.
    // get userActivated(): boolean {
    //   return this.authService.authenticated;
    // }

    constructor(
        private readonly titleService: TitleService,
        private readonly authService: AuthenticationService,
        public appState: ApplicationStateService,
        public appModes: AppModes,
        private electronService: ElectronService,
        private router: Router,
        private log: Logger,
        public updateService: UpdateService,
        public detailsService: DetailsService,
        public identityService: IdentityService,
        public settings: SettingsService,
        public localeService: LocaleService,
        private apiService: ApiService,
        public snackBar: MatSnackBar,
        private walletService: WalletService,
        private readonly cd: ChangeDetectorRef,
        public dialog: MatDialog,
        public notifications: NotificationService,
        private globalService: GlobalService,
        private readonly breakpointObserver: BreakpointObserver,
    ) {
        this.log.info('Expanded:', localStorage.getItem('Menu:Expanded'));

        this.loadFiller();

        this.isAuthenticated = authService.isAuthenticated();

        if (this.electronService.ipcRenderer) {
            if (this.electronService.remote) {
                const applicationVersion = this.electronService.remote.app.getVersion();

                this.appState.setVersion(applicationVersion);
                this.log.info('Version: ' + applicationVersion);
            }

            this.ipc = electronService.ipcRenderer;

            this.ipc.on('daemon-exiting', (event, error) => {
                this.log.info('daemon is currently being stopped... please wait...');
                this.appState.shutdownInProgress = true;
                this.cd.detectChanges();

                // If the exit takes a very long time, we want to allow users to forcefully exit City Hub.
                setTimeout(() => {
                    this.appState.shutdownDelayed = true;
                    this.cd.detectChanges();
                }, 60000);

            });

            this.ipc.on('daemon-exited', (event, error) => {
                this.log.info('daemon is stopped.');
                this.appState.shutdownInProgress = false;
                this.appState.shutdownDelayed = false;

                // Perform a new close event on the window, this time it will close itself.
                window.close();
            });

            this.ipc.on('daemon-error', (event, error) => {

                this.log.error(error);

                const dialogRef = this.dialog.open(ReportComponent, {
                    data: {
                        title: 'Failed to start EXOS Node background daemon',
                        error,
                        lines: this.log.lastEntries(),
                        specific: this.log.catchErrorLogs()
                    }
                });

                dialogRef.afterClosed().subscribe(result => {
                    this.log.info(`Dialog result: ${result}`);
                });
            });

            this.ipc.on('log-debug', (event, msg: any) => {
                this.log.verbose(msg);
            });

            this.ipc.on('log-info', (event, msg: any) => {
                this.log.info(msg);
            });

            this.ipc.on('log-error', (event, msg: any) => {
                this.log.error(msg);
            });
        }

        // Upon initial load, we'll check if we are on mobile or not and show/hide menu.
        const isSmallScreen = breakpointObserver.isMatched(Breakpoints.HandsetPortrait);

        this.menuOpened = !isSmallScreen;

        breakpointObserver.observe([
            Breakpoints.HandsetPortrait
        ]).subscribe(result => {
            if (result.matches) {
                appState.handset = true;
                this.handset = true;
                this.menuMode = 'over';
                this.showFiller = true;
            } else {
                appState.handset = false;
                this.handset = false;
                this.menuOpened = true;
                this.menuMode = 'side';
                this.loadFiller();
            }
        });

        this.authService.isAuthenticated().subscribe(auth => {
            if (auth) {
                this.updateNetworkInfo();
            } else {
            }
        });

        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }

            const contentContainer = document.querySelector('.app-view-area-main') || window;
            contentContainer.scrollTo(0, 0);
        });
    }