Angular Material: Sidenav w. Toolbar (Expandable/Collapsable) | 2022

preview_player
Показать описание
Support via Youtube Membership:

Support via "Like", "Comment" "Github Sponsor", "Github Follow", "Youtube Follow" etc. would be awesome!

Timestamps
00:00 Welcome, Project Summary and Table of Contents
01:02 Look at running Project Outcome
02:05 Look through Codebase in Detail

Angular is used in v13.
Nodejs is used in v14.

Main Frameworks/Tools:
  1. TommiCodes
  2. angular
  3. angular material
  4. material
  5. sidenav
  6. toolbar
Рекомендации по теме
Angular Material: Sidenav 0:14:23

Angular Material: Sidenav w. Toolbar (Expandable/Collapsable) | 2022

Angular Material Sidebar 0:33:31

Angular Material Sidebar With Toolbar | Angular material Tutorial 33

Create a YouTube 0:13:00

Create a YouTube sidebar clone with Angular Material Components! (Part 1)

Sidenav menu bar 0:09:14

Sidenav menu bar in angular using material UI components | |Angular 15 - Material UI Tutorial

Sidebar Notification Popup: 0:06:11

Sidebar Notification Popup: Angular Material (Sidenav, Toolbar & List)

Angular Material Sidenav 0:27:04

Angular Material Sidenav | Angular Material Tutorial 27 | Sidebar

Animated Responsive Sidenav 0:28:29

Animated Responsive Sidenav in Angular | Part 1 | Responsive Sidenav

Angular 15 Starter 0:00:22

Angular 15 Starter Project with Responsive Layout Sidebar

Using Angular Material's 0:23:28

Using Angular Material's SideNav and ToolBar

🦸‍♂️ Create Angular 0:10:52

🦸‍♂️ Create Angular SideNav Code Example with @angular/material SideBar open and close

Create a Responsive 0:12:18

Create a Responsive Sidebar Menu with Angular Material

Adding Responsive Toolbar 0:51:14

Adding Responsive Toolbar | Part 3 | Responsive Sidenav

Angular material responsive 0:37:42

Angular material responsive toolbar and sidenav | Angular tutorials | 02

Angular Material 14 0:22:21

Angular Material 14 Sidenav with List

Angular Material Tutorial 0:13:06

Angular Material Tutorial in Hindi #09 Sidenav and Toolbar

How to create 0:00:45

How to create Sidenav menu in Angular

Responsive Navigation with 0:30:08

Responsive Navigation with Angular Material. Address Book project.

Angular Material #37 0:05:25

Angular Material #37 - Toolbar Component

Adding Multi Level 0:37:30

Adding Multi Level Menu to Sidenav | Part 2 | Responsive Sidenav

Learning Angular 7 0:01:12

Learning Angular 7 from scratch - Part 5-7 - Adding Toolbar in Sidebar Navigation

Angular Material Tutorial 0:09:49

Angular Material Tutorial - 11 - Sidenav

Angular material Toolbar 0:09:28

Angular material Toolbar | Angular material Tutorial 26

Angular Material Navbar/Toolbar 0:16:47

Angular Material Navbar/Toolbar | Angular Routing

#44: Create Separate 0:06:29

#44: Create Separate Component for Angular Material Toolbar in Angular 14 Application

Комментарии
Автор

Beautiful sir, Exactly I am looking for the this, & lots of thanks for the source code.

mohammedabdulaziz
Автор

thank you so much dude! you saved my life!! do you have any tips to give me about how can i use angular material properly? At my company we are changing from bootstrap to material but i've been getting some difficults to apply it on projects...

anyway, thank you for your contribution.

igornevesregueira
Автор

Hey @thomasoliver6995 thanks for your video. 👍 One thing that was a bit missleading for me is the functionality of the Expandable/Collapsable sidenav.

I was wondering that if you set `opened` to false on the `<mat-sidenav>` it was still showing up with the icons. That's something I wanted to achieve in a project but haven't been able to figure out yet.

Then I've seen in your example is `isExpanded` passed as a string to `opened` on the `<mat-sidenav>`. So `opened` is always set to true. And `isExpanded` just removes the `<span class="menu-item">` elements, so the sidenav resizes. Was this intentional? Then it's probably better to just set `opened` to true?

Or do I miss something? :)

webdevlukas
Автор

Perfect job, how about making the transition smooth both when expanding and collapsing?

TalkAsap
Автор

Apreciando a una mujer tan hermosa. 2:5 sentadillas son unos QQGIRLS.Uno muchas y un buen ejercicio. 5:25 Se deja ver que hay muy buenos resultados 😍👍 Saludos desde la Cd.. de world losj mortales abian apreciado tan hermosa mujer

СергейАндреев-ют