feature(theme-basic): add application name and logo to layout

npm/ng-packs/packages/core/src/lib/models/config.ts

@@ -7,11 +7,17 @@ export namespace Config {
   }
 
   export interface Environment {
+    application: Application;
     production: boolean;
     oAuthConfig: AuthConfig;
     apis: Apis;
   }
 
+  export interface Application {
+    name: string;
+    logoUrl?: string;
+  }
+
   export interface Apis {
     [key: string]: { [key: string]: string };
   }

npm/ng-packs/packages/core/src/lib/states/config.state.ts

@@ -19,6 +19,11 @@ export class ConfigState {
     return state;
   }
 
+  @Selector()
+  static getApplicationInfo(state: Config.State) {
+    return state.environment.application || {};
+  }
+
   static getOne(key: string) {
     const selector = createSelector(
       [ConfigState],

npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html

@@ -1,5 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" id="main-navbar">
-  <a class="navbar-brand" routerLink="/">MyProjectName</a>
+  <a class="navbar-brand" routerLink="/">
+    <img *ngIf="appInfo.logoUrl; else appName" [src]="appInfo.logoUrl" [alt]="appInfo.name" />
+  </a>
   <button class="navbar-toggler" type="button" [attr.aria-expanded]="!isCollapsed" (click)="isCollapsed = !isCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
@@ -18,3 +20,7 @@
 
 <abp-confirmation></abp-confirmation>
 <abp-toast></abp-toast>
+
+<ng-template #appName>
+  {{ appInfo.name }}
+</ng-template>

npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Config, ConfigState } from '@abp/ng.core';
 import { slideFromBottom } from '@abp/ng.theme.shared';
+import { Component } from '@angular/core';
+import { Store } from '@ngxs/store';
 
 @Component({
   selector: ' abp-layout',
@@ -8,4 +10,10 @@ import { slideFromBottom } from '@abp/ng.theme.shared';
 })
 export class LayoutComponent {
   isCollapsed: boolean = false;
+
+  get appInfo(): Config.Application {
+    return this.store.selectSnapshot(ConfigState.getApplicationInfo);
+  }
+
+  constructor(private store: Store) {}
 }