How to develop tabs in angular7 which switch among two different components?
I have generated three different components in angular 7 project
ng g c mycomp1
ng g c mycomp2
ng g c mycomp3
now I want to develop a tab in mycop1 component which looks like below
by clicking on First tab it should display HTML or render the content from the same component.
by clicking on the Second tab I required to render content from mycomp2 component(from the different component),
Similarly from the third tab required to render from mycomp3 component.
kindly help how can I proceed to do this,
Thanks
Solution
let assume we have 4 components (app.component, a.component, b.component, c.component)
check the complete code in the below url https://stackblitz.com/edit/angular-gerrxm
- Confirm password validation in angular
- Avoid referencing unbound methods which may cause unintentional scoping of `this` error when calling static methods
- Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
- How to Create a specific version of Angular Project using CLI?
- Angular how to use slicePipe in the new @for loop
- How to add unit tests for Signal Queries?
- Integratin CalHeatMap into Anguar app with SSR
- How to prevent the border radius from disortion when decreasing the height?
- Angular WebComponent instances is getting created multiple times
- How to use async function to await user input from onClick?
- Angular SSR complains about non-ESM modules in my Express API code
- Angular - react to changes in rxResource()
- I get "Http failure response for (unknown url): 0 Unknown Error" instead of actual error message in Angular
- Angular 17 does not post and i get an TypeError in dev console
- Angular 5 component testing select and triggered event
- How to observe touched event on Angular 2 NgForm?
- How to check whether <ng-content> is empty? (in Angular 2+ till now)
- How to accept only predefined values in an Angular @Input
- NavLink in React JS not working as expected?
- Can't modify inner content of ViewContainerRef, only adding tags after it in Angular
- Override User Agent Styling for Auto fill input fields
- Module not found: Error: Can't resolve 'class-transformer/storage' - Angular Universal / NestJs
- Angular 4 - Failed: Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)
- How should I reference different files for different devices using Angular?
- Can't access a field of an object in TypeScript by using a variable as a name of the index unless declared as a constant
- Angular 16 Signal update doesn't update view
- class is a standalone component, which can not be used in the `@NgModule.bootstrap` array in Angular
- Is there a way to set a default value to signal's rxResource() such as signal()
- How to generate dynamic metadata from an Angular component using node js?
- Where is 'new BrowserWindow()' in Angular Electron application