Dynamic Tabs in Angular 16 | No Angular Material
HTML-код
- Опубликовано: 5 июн 2024
- About the Video--------------------------
In this Video, I have built a Angular 16 Tab Control System.
This Angular component has in built tab mechanism, where we can create new tabs dynamically.
In this Website, I have created
Tab Component: A component which can dynamically create tabs and insert inside this component.
Tab Service: A service which can be injected inside any component where we want to create tabs.
Modal Service: A service which can used to display modals.
This component can preserve already created tabs without destroying it, so that
we can access it later whenever required.
All this will happen without refreshing web page.
If you Like the Video please Like, Share and Subscribe.
TimeStamps -
00:00 - Overview of Website.
03:24 - Basic Structure of Website
06:28 - Creating Tab Control Component.
08:05 - Creating Tab Header.
14:30 - Inserting Components Dynamically
29:18 - Selecting Tabs
34:32 - Closing Tab.
45:30 - Modal Service.
58:31 - Complete
Links-------------------------
Source Code : drive.google.com/drive/folder...
Complete Login Form Playlist: • Complete Login Form (A...
How to make Expandable Side-Nav in Angular : • Header and Expandable ...
Employee Management System in Angular: • Angular 13 CRUD | Empl...
Home Expense Manager : • Angular 13 - Home Expe...
Typing-Test Website : • Let's Build a Typing T...
Dynamic Components: • How to Create Dynamic ...
E-Commerce Website : • Angular 14 E-Commerce ...
News Website : • Fully Responsive News ...
Portfolio Website : • Modern Portfolio Websi...
Library Management Website: • Angular 15 Library Man...
Tags---------
#programming, #programmingtutorials, #tutorials, #frontend, #backend,#angular, #angularecommerce, #ecommercewebsite, #modernwebsite, #angular13, #angular14, #angularproject, #angularwebsite, #frontend, #backend, #fullstackwebsite, #html, #css, #typescript
#tab, #dynamicComponentsinangular, #angularcomponents, #dynamictabs, #viewcontainerref
Thanks a lot, you have very clarity of thoughts!!! Excellent article !!!
Thanks a ton.
Content is good. please explain step by step. teaching method
Can you please make a video on Angular -Admin Dashboard type project. There are no videos on this topic in youtube, yours will be the first. Most of the dashboard videos are related to React.
Yes I will. but it takes time for me to create such videos. So i will upload in feb maybe.
Bro, you are awesome. You start Udemy courses, you explain really well. Thank you for the video❤
Very good concept and detailed explanation. Source available in git hub ?
sir component Ref hai mere main vo component factory aa raha hai
can we pop up mat dialog when we switch between the tabs showing "unsaved changes"
if so can you please provide the code?
Excellent tutorial for me, but I find a problem when I close the non-selected tab after using confirmation modal dialog, i.e. tab is auto selected when i click on X button.
When we click on tab header we are making tab active thats why. But if you dont want that then when we click on close button dont make tab active.
Facing Same issue its not resolved and tab is not getting closed
source code does not contain tab-control
Are you able download source code? If so how?
speak in english