@angular/platform-browser#Title TypeScript Examples

constructor(
        private videoService: VideoService,
    //  private messageService: MessageService, // Fun to use TOAST for  i.e. Comment
        private titleService: Title // Inject to set document title on  browser
    ) {
    setInterval(() => {
      this.now = new Date();
    }, 1);
     }

constructor(
    public dashboardSandbox: DashboardSandbox,
    private router: Router,
    private _sanitizer: DomSanitizer,
    private configService: ConfigService,
    public titleService: Title,
    public layoutSandbox: LayoutSandbox
  ) {
    Object.assign(this, { horizontalbar, line, single });
  }

public constructor(public router: Router, private titleService: Title) {
        this.router.events
            .pipe(filter((event) => event instanceof ChildActivationEnd))
            .subscribe((event) => {
                // eslint-disable-next-line prefer-destructuring
                let snapshot = ((event) as ChildActivationEnd).snapshot;
                while (snapshot.firstChild !== null) {
                    snapshot = snapshot.firstChild;
                }
                this.titleService.setTitle(snapshot.data.title || 'ServerManager');
            });
    }

constructor(
    private previewService: PreviewService,
    private titleService: Title,
    private intlService: IntlService,
    private appService: AppService,
    public searchService: SearchService,
    public selectionService: SelectionService,
    public loginService: LoginService,
    public auditService: AuditWebService,
    public ui: UIService,
  ) {

    // Initialize the facet preview action (opens the preview route)
    const expandPreviewAction = new Action({
      icon: "fas fa-expand-alt",
      title: "msg#facet.preview.expandTitle",
      action: () => {
        if (this.openedDoc) {
          this.previewService.openRoute(this.openedDoc, this.searchService.query);
        }
      }
    });

    this.previewCustomActions = [ expandPreviewAction ];
  }

constructor(
    private actions$: Actions,
    private authApi: ListsService,
    private appState$: Store<store.AppState>,
    public snackBar: MatSnackBar,
    public title: Title,
    private meta: Meta,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

constructor(
    private logService: LogService,
    private userService: UserService,
    private titleService: Title, // Inject to set document title on  browser
    private avatarService: AvatarService, // To Create  Avatar
    private missionService: MissionService, // Provider Info from loggIn
    private route: ActivatedRoute,
    private router: Router,
    private productService: ProductService,
    private photoService: PhotoService,
    private blogService: BlogService,
    private videoService: VideoService
    ) { }

@NgModule({
  declarations: [
    AppComponent,
    PatternComponent,
    ManualComponent,
    ResourcesComponent,
    ToolsetComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    LedgeRenderModule,
    ScullyLibModule,
    FlexLayoutModule,
    TranslateModule.forRoot({
      defaultLanguage: 'zh-cn',
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader,
      },
      // loader: {
      //   provide: TranslateLoader,
      //   useFactory: createTranslateLoader,
      //   deps: [HttpClient],
      // },
    }),
  ],
  providers: [Title],
  bootstrap: [AppComponent],
})
export class AppModule {}

APP_PROVIDERS = [
    Title,
    {
        provide: HIGHLIGHT_OPTIONS,
        useValue: HIGHLIGHT_OPTIONS_VALUE
    },
    {
        provide: LocationStrategy,
        useClass: PathLocationStrategy
    },
    {
        provide: TUI_DOC_TITLE,
        useValue: TITLE_PREFIX
    },
    {
        provide: TUI_DOC_PAGES,
        useValue: pages
    },
    {
        provide: TUI_DOC_DEFAULT_TABS,
        useValue: DEFAULT_TABS
    },
    {
        provide: TUI_DOC_LOGO,
        useValue: LOGO_CONTENT
    },
    {
        provide: TUI_ANIMATIONS_DURATION,
        useValue: 300
    },
    {
        provide: DELAY_AFTER_NAVIGATION,
        useValue: 150
    }
]

constructor(private angularTitleService: Title, private router: Router, private route: ActivatedRoute) {
        //subscribe to router events and update the title
        this.router.events.pipe(
            filter((event) => event instanceof NavigationEnd),
            map(() => this.route),
            map((route) => {
                while (route.firstChild) route = route.firstChild;
                return route;
            }),
            filter((route) => route.outlet === 'primary'),
            mergeMap((route) => route.data)
        ).subscribe((event) => this.setTitle(event['title']));
    }

constructor(private titleService: Title, private translate: TranslateService, public messageService: MessageService, 
    private overlay: OverlayContainer, private router: Router,
    public walletStateService: WalletStateService, private dlcService: DLCService, private dlcFileService: DLCFileService,
    private websocketService: WebsocketService, public authService: AuthService,
    private darkModeService: DarkModeService) {
    
    this.loggedIn$ = this.authService.loggedIn.subscribe(r => {
      console.debug('loggedIn')
      this.onLogin()
    })
    this.loggedOut$ = this.authService.loggedOut.subscribe(r => {
      console.debug('loggedOut')
      this.onLogout()
    })
    this.authService.initialize()
  }

constructor(private router: Router, private activatedRoute: ActivatedRoute, private titleService: Title) {
        this.router.events
            .pipe(filter((event) => event instanceof NavigationEnd))
            .pipe(map(() => this.activatedRoute))
            .pipe(
                map((route) => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }
                    return route;
                })
            )
            .pipe(filter((route) => route.outlet === 'primary'))
            .pipe(mergeMap((route) => route.data))
            .subscribe((event) => {
                this.titleService.setTitle(event['title']);
                this.pageInfo = event;
            });
    }

constructor(private titleService: Title,
                private formBuilder: FormBuilder
    ) {
        this.contactForm = this.formBuilder.group({
            name: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(25)]],
            emailAddress: ['', [Validators.required, Validators.email, Validators.pattern(this.constants.matchPattern.emailPattern)]],
            phoneNumber: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]],
            message: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(255)]]
        });
    }

constructor(
    private productService: ProductService,
    private messageService: MessageService, // To invoke toast message
    private titleService: Title // Inject to set document title on  browser
  ) {
    this.responsiveOptions = [
      {
        breakpoint: '1024px',
        numVisible: 3,
        numScroll: 3
      },
      {
        breakpoint: '768px',
        numVisible: 2,
        numScroll: 2
      },
      {
        breakpoint: '560px',
        numVisible: 1,
        numScroll: 1
      }
    ];
  }

describe('AboutUsComponent', () => {
    beforeEach(() => {
        fixture = TestBed.configureTestingModule({
            declarations: [AboutUsComponent],
            providers: [{ provide: Title, useClass: MockTitle }],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .createComponent(AboutUsComponent);
        fixture.detectChanges(); // initial binding
    });

    it('should have skyblue <h2>', () => {
        const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
        const bgColor = h2.style.backgroundColor;
        expect(bgColor).toBe('skyblue');
    });
});

constructor(
    title: Title,
    private router: Router,
    private http: HttpClient,
    private storage: StorageMap,
    private shepherdService: ShepherdService,
    public translate: TranslateService
  ) {
    title.setTitle('DevOps 工具元素周期表 - Ledge DevOps 知识平台');
  }

constructor(
    @Optional() private _config: DynamicBrowserTitleConfig,
    private _router: Router,
    @Inject(DOCUMENT) private document: any,
    private _titleService: Title
  ) {
    this._document = this.document as Document;
    this.init();
    const titleElem: HTMLElement = this._document.querySelector('title');
    this._defaultTitle = titleElem?.innerText || '';
  }

constructor(private title: Title) {}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    GameFormComponent,
    HeaderComponent,
    AuthenticationComponent,
    FullNamePipe,
    SliceTextPipe,
    MathRoundPipe,
    FooterComponent,
    ProjectsComponent,
    DropdownPageComponent,
    AnnotateComponent,
    AdminComponent,
    CreateNewComponent,
    previewProjectsComponent,
    DatasetsSharingComponent,
    MyDatasetsComponent,
    SupercolliderComponent,
    AppendNewEntriesComponent,
    FAQComponent,
    DownloadComponent,
    GenerateComponent,
    UploadComponent,
    ToUpperCasePipe,
    PageNotFoundComponent,
    LoginComponent,
    EditProjectComponent,
    MyFilter,
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    ClarityModule,
    ROUTING,
    ChartsModule,
    CoreModule,
    SharedModule,
    NgSelectModule,
    NgxSliderModule,
  ],
  providers: [
    AvaService,
    UserAuthService,
    AuthGuard,
    FeedbackService,
    LabelStudioService,
    Title,
    GetElementService,
    UnZipService,
    DownloadService,
    ToolService,
    MarkdownParserService,
    CommonService,
    S3Service,
    EmailService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

constructor(
    public loginService: LoginService,
    public searchService: SearchService,
    private titleService: Title,
    private intlService: IntlService,
    private appService: AppService) { }

constructor(
    private actions$: Actions,
    private authApi: LayoutsService,
    private appState$: Store<store.AppState>,
    public title: Title,
    private meta: Meta
  ) {}

constructor(private router: Router, private globalService: GlobalService, private apiService: ApiService, private titleService: Title, private electronService: ElectronService, private nodeService: NodeService) {
  }

constructor(
    private readonly meta: Meta,
    private readonly title: Title,
    // tslint:disable-next-line: variable-name
    @Inject(DOCUMENT) private readonly _document: Document,
  ) {
  }

constructor(
    public title: Title, 
    private router: Router, 
    private activeRoute: ActivatedRoute,
    private routePartsService: RoutePartsService,
    // private themeService: ThemeService,
    private layout: LayoutService,
  ) { }

constructor(private titleService: Title, private env: EnvironmentsService) {}

constructor(
		@Inject(PLATFORM_ID) platformId: any,
		iconRegistry: MatIconRegistry,
		sanitizer: DomSanitizer,
		appService: AppService,
		titleService: Title,
		localStorageSvc: LocalStorageService,
		private windowRef: WindowRef,
		private sw: SwUpdate,
		private dialog: MatDialog,
		private location: Location,
		private router: Router,
		private overlayRef: OverlayContainer,
		public viewportService: ViewportService
	) {
		// Check if platform is browser
		AppComponent.isBrowser.next(isPlatformBrowser(platformId));

		for (const iconRef of iconList) {
			iconRegistry.addSvgIcon(
				iconRef[0],
				sanitizer.bypassSecurityTrustResourceUrl(`assets/${iconRef[1]}`)
			);
		}

		// Set page title
		{
			router.events.pipe( // Handle "ActivationStart" router event
				filter(ev => ev instanceof ActivationStart),
				map(ev => ev as ActivationStart),

				// Find variables and omit them from the title.
				// Components can call AppService.pushTitleAttributes() to update them
				tap(ev => {
					const title: string = '7TV - ' + (ev.snapshot.data?.title ?? 'Untitled Page' as string);

					appService.pageTitleSnapshot = String(title);
					titleService.setTitle(`${title?.replace(AppService.PAGE_ATTR_REGEX, '')}`);
				})
			).subscribe();
		}

		this.setTheme();

		if (isPlatformBrowser(platformId)) {
			localStorageSvc.storage = localStorage;
		}
	}

constructor(
    private photoService: PhotoService,
    private messageService: MessageService,
    private confirmationService: ConfirmationService,
    private titleService: Title
    ) { }

constructor(private router: Router,
              private destroy$: DestroyService,
              private userInfoService: UserInfoService,
              private menuServices: MenuStoreService,
              private splitNavStoreService: SplitNavStoreService,
              private activatedRoute: ActivatedRoute, private tabService: TabService,
              private cdr: ChangeDetectorRef, private themesService: ThemeService,
              private titleServe: Title, @Inject(DOCUMENT) private doc: Document) {
    this.initMenus();

    this.subTheme$ = this.isOverMode$.pipe(switchMap(res => {
      this.isOverMode = res;
      return this.themesOptions$;
    }), tap(options => {
      this.themesMode = options.mode;
      this.isMixiMode = this.themesMode === 'mixi';
    }), share(), takeUntil(this.destroy$));

    // 监听混合模式下左侧菜单数据源
    this.subMixiModeSideMenu();
    // 监听折叠菜单事件
    this.subIsCollapsed();
    this.subAuth();
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        tap(() => {
          this.subTheme$.subscribe(() => {
            // 主题切换为混合模式下，设置左侧菜单数据源
            // 如果放在ngInit监听里面，会在混合模式下，刷新完页面切换路由，runOutSideAngular
            if (this.isMixiMode) {
              this.setMixModeLeftMenu();
            }
          })
          // @ts-ignore
          this.routerPath = this.activatedRoute.snapshot['_routerState'].url;
          this.clickMenuItem(this.menus);
          this.clickMenuItem(this.copyMenus);
          // 是折叠的菜单并且不是over菜单,解决折叠左侧菜单时，切换tab会有悬浮框菜单的bug
          if (this.isCollapsed && !this.isOverMode) {
            this.closeMenuOpen(this.menus);
          }

          // 顶部菜单模式，并且不是over模式，解决顶部模式时，切换tab会有悬浮框菜单的bug
          if (this.themesMode === 'top' && !this.isOverMode) {
            this.closeMenu();
          }
        }),
        map(() => this.activatedRoute),
        map((route) => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        filter((route) => {
          return route.outlet === 'primary';
        }),
        mergeMap((route) => {
          return route.data;
        }),
        takeUntil(this.destroy$),
      )
      .subscribe((routeData) => {
        // 详情页是否是打开新tab页签形式
        let isNewTabDetailPage = routeData['newTab'] === 'true';
        this.tabService.addTab({
          title: routeData['title'],
          path: this.routerPath,
          relatedLink: routeData['relatedLink'] ? routeData['relatedLink'] : [],
        }, isNewTabDetailPage);
        this.tabService.findIndex(this.routerPath);
        this.titleServe.setTitle(routeData['title'] + ' - Ant Design');
        // 混合模式时，切换tab，让左侧菜单也相应变化
        this.setMixModeLeftMenu();
      });
  }

public constructor(
		private readonly popupService: PopupService,
		private readonly stateService: StateService,
		private readonly titleService: Title,
		private readonly loaderPopup: LoaderPopupService) {
	}

constructor(private titleService: Title){}