Header and Expandable Side Nav in Angular 13 using HTML, CSS, Bootstrap 5 | 2022
HTML-код
- Опубликовано: 15 апр 2022
- About the Video--------------------------
In this video, I have made a Header and side nav in angular using HTML, Css, and Bootstrap 5.
when user clicks on the menu button, the side nav expands and again clicking on the menu button will close the side nav in such a way that only icons are visible.
Watch the video to know more.
LINKS
Complete Login Form Playlist :
• Complete Login Form (A...
Tags---------
#programming, #programmingtutorials, #tutorials, #frontend, #backend,
#angular13, #angularcrud, #angularapplication, #html, #css, #js, #websiteinhtmlcssjavascripe, #headerinthtml, #sidenavinhtml, #headerinangular, #sidenavinhtml
This is very very helpful to those who is new like me to work with Angular . great work brother . and Thanks a lot .
This is why I love the Indian's Tutos! Thanks
Really Awesome video. You are doing great job. Keep supporting angular community by your knowledge and wisdom.
Highly Appreciated! God bless you brother.
Thank You so much brother.God Bless You
Hi @rohan,
Thanks so much. This is very helpful. When I try with responsive the main display area not expanding correctly. Your code is it responsive ?
thank you so much brother. it was of great help
Great bro really helped me lot thanks
Thank you so much. Really helped me.
love u bro excellent teaching style🥰😍
Very nice tutorial. Very helpful and well explained.
Bro you are awesome ,helped me a lot🥺
Nice explanation, Thanks bro...
Thank you, you saved my day
love your content brother
what about main display area how to change the contain in there as per the selected option from side navigation bar
really its nice, thanks for your efforts
Very nice tutorial Thanks!
Praise to God🙇♀️ and thank you so much bro🤗
thanks you very much, from VietNam with love
Awesome!, Excellent
Very nice. I liked tutorial. How can I add a 2nd level in the side-nav? Also, how to keep the hightlight of the currently side-bar item selection?
can you help me how to add router/link on the list... Thanks
siendo sincero no entendí ni una sola palabra que dijiste, pero que feliz estoy con el resultado MUCHAS GRACIAS. seguí todos los paso y tuve un gran resultado
x2 jaja
Thanks
Nice tutorial too. How you apply it in existing webpage like page with small table border?
Nice video bro... keep it up....
Ty so much bro.
Very helpful, Thank you
utkrsht tyootoriyal, lekin main saidanev kaaryakshamata kaise pradaan karoon? main maargon ko kaise kol karoon?
main angrejee bhee nahin bolata aur main kadam dar kadam saphal hua, lekin mujhe keval us antim charan kee aavashyakata hai, kya aap mujhe bata sakate hain ki kis kod ka upayog karana hai? rautaralink ke saath kaam nahin karata hai!
Nice video Thanks !! how to add submenu like under products and how to make it responsive. please help on this .
nice explaination sir ,love from bangladesh
Hi Rohan, i wanted to implement this header and side navigation bar in my django project, can you help me in that?
how would navigate the link to the dispaly area. i mean routeroutlet is always beside the sidebar component in app.html file
hi this icon that you added there i didn't getting properly what is the reason for that please tell ,i had added based on you tutorials please explain that
Bro please do the same thing using Angular material without bootstrap. Please use the same design.
thank you. It was very good content. I would like the source code.
please make video on modal with modal form open from right side
how to show the content of all components which is on side bare like home , product in to display area please provide code or make a video
do you have this project on github?
Toggling react js main kaise kare plzz help
Your toggle button is not working...i code same to same....please provide solution where is error otherwise don't upload such videos i gave my time for this and code not working!!!!
please give the source code link....
very helpful and easy guide, yet idk indian language😅👍kudos
from where i can get this code?
An example with multilevel list item please!!!!
Thanks for the awesome tutorial, can you please provide the source code?
Thankyou so much and please let me know that this user interface is responsive?
Yeah this is looks not responsive
sir please provide me source code of the navbar
Hi Rohan your video is awesome!!! But the toggle of that menu is not working i have written everything correctly still.Please help
Display block
@@programmer_rohan where to add ? Display: block ; ?
Screen recorder ke liye kon sa software use karte ho bro
Obs
@@programmer_rohan you are on Facebook
@@coderdhruv no
where is code？
Can i get the github link?
my kit font awesone account not start bz
message receve bou not open page
what i do sir
please reply i try it before10 days
my fontawesone account not created
when i click for send email verification
message receave my email
when i go fo conformation button click then page not open of fone awesome account
hi i am getting below error "Type 'Event' is not assignable to type 'boolean'."
You called function check proper
Hi one question the whole thing works and is perfect,but i have a lot of pages in my website so instead of display area i want them pages to do the move right when the sidebar is expanded how do i do that please let me know
If all you pages are in display area, they will automatically move to right. Otherwise you have to move them separately
Hi so all my pages are separate how do i get them to move spearately what code do i put in their css
So for example one of my pages is Hash generartor it has its own css file what do i put in there if you can let me know please wpuld be great
Because i have a class= card which is the template or the duv class for all my pages html how do i get them to move please help really need it for a project to work
@@ryand250 since we are using angular every page should be in component, and by using router outlet we display one page at a time
GitHub link??
can you please share the source code for reference?
@Output() sideNavToggled = new EventEmitter(); yea statement error dikha raha he
Eventemiter angular/core me se import hona chahiye
İmport this = import { EventEmitter } from '@angular/core';
Source Code?
When the page is so long that it has to be scrolled the sidebar doesnt scale to the bottom, how do this?
Why it wont scale till bottom? It should. If not, then make its height 100%.
@@programmer_rohan that sadly still doesnt work. Im now doing a plus instead of a minus but now even tho the content isn longer than the page you can scroll
@@hamsg put overflow: auto on main display area
@@programmer_rohan ok ill try
Please share git link brother
me gusta tu estilo pero no veo como hiciste todo esto
Did you copy the sidebar from Angularistic RUclips tutorial?
???
@@programmer_rohan the nav bar that you created. Did you design it yourself or did you copy it from somewhere?
@@aqbgaming7656 I always look some different videos, if I found something interesting I design it in my way
@@programmer_rohan you should mention the sources were you copy your code from. it is not a good thing to steal someones work and claim it as yours.
@@aqbgaming7656 how will I know whether that channel has itself not copied?
Please send source code link
Source Code please
code source plz
Hello brother menu button pe click karne ke bad bhi wo open nahi ho rha hai same to same process karne ke bad bhi . Solution batao kuchh bhaii .
Width change nahi ho rahi hogi
@@programmer_rohan yes bro ho gaya ng class add mene kahi or kr dia tha . Thanks 🙏
router outlet kaha par ayega?
App.component
Hi bro pls share me the full code for this tutorial bro
Tmro I have project on this bro pls provide the full code bro
share the code
I cannot see this with a clear video quality...
can you give the git repo
i meant the source code for this project
bro please provide source code
is anyone implemented in angular.
Help me
me siento estafado!!!!😕
==> [sideNavStatus] Erorr dekhaa raha hy ....help me 28:15
Import karo
@@programmer_rohan Can you please explain what to import?
@@PavanKumar-th7wl 28:24 uper ki line dekho
Side nav expandable single component mein samjhaiye