要创建一个具有动态选项卡导航的Angular App，可以使用Angular和Bootstrap框架。下面是一个简单的示例代码：

1. 首先，确保已安装所需的依赖项。使用以下命令安装Angular和Bootstrap：

   npm install @angular/cli
   ng new angular-app
   cd angular-app
   npm install bootstrap
   

2. 在app.module.ts文件中导入所需的模块：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { TabsModule } from 'ngx-bootstrap/tabs';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       TabsModule.forRoot()
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 在app.component.ts文件中定义选项卡导航的数据：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     tabs = [
       { title: 'Tab 1', content: 'Tab 1 Content' },
       { title: 'Tab 2', content: 'Tab 2 Content' },
       { title: 'Tab 3', content: 'Tab 3 Content' }
     ];
   
     activeTab = this.tabs[0];
   }
   

4. 在app.component.html文件中使用ngx-bootstrap的tabs组件来渲染选项卡导航：

   
     
   Angular App with Bootstrap Dynamic Tab Navigation
     
       
         
           {{ tab.title }}
         
         
   
           {{ tab.content }}
         
       
     
   
   

   在上面的代码中，我们使用了*ngFor指令来循环遍历tabs数组，并将每个选项卡的标题和内容显示在页面上。activeTab变量用于跟踪当前选中的选项卡。

5. 在app.component.css文件中添加一些样式来美化选项卡导航：

   .container {
     margin-top: 50px;
   }
   
   .tab-content {
     padding-top: 20px;
   }
   

6. 最后，在命令行中运行Angular App：

   ng serve
   

   这将启动开发服务器，并在浏览器中打开应用程序。您应该能够看到一个具有动态选项卡导航的页面。

以上就是一个使用Angular和Bootstrap创建动态选项卡导航的简单示例。您可以根据自己的需求对其进行扩展和定制。