Getting Started with Angular 6 Material (Tutorial)
Вставка
- Опубліковано 17 жов 2024
- coursetro.com - In this tutorial, I will show you how to get up and running with Angular 6 Material. This will include starting a new Angular 6 project with the Angular CLI, integrating Material and the other necessary dependencies, and learning how to read the documentation so that you can go forward with Material/Angular in confidence. Let's get started!
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - Навчання та стиль
Step 2 and 3 was not clear to me in the documentation and your video helped me to understand. Thanks a lot.
i did not know how to start with Angular Material. Five Stars to this brief and nice tutorial
You have got the gift of teaching! Great job. Continue making great videos!
Thanks Gary, You save my life, very nice video!
the best thing about your tutorials is , you don't just start type the code and ask us to kids memorize the code but you actually go to the official documentation and start explaining from where you got the code and how you are implementing it.. so that in future is the official code changes then we know how to find our way.
Hi. Do you have a full course on Angular Material please? If you have it, how much is it? and can I download the videos so I can watch with ease? Thank you very much.
Hi Gary, your videos are awesome, liked the way of your explanation on the different topics of web technologies
Hi Gary, thank you for the videos on each such topics. Very Helpful!
I installed angular cli, visual studio code, then i installed wampserver.
To view "my first app" on localhost i moved the initial app folder from "users/username/AppData" to "www directory" now it shows page can't be reached.
How to configure the paths or is there any other issue.
Awesome tutorial! Just one question! I've followed your steps, but Material doesn't work in my child routes at all. Works great in the parent component, but not children.
Any ideas?
simply because you have to import the MaterialModule inside the other components module file :
import { MaterialModule } from './material';
and then add it to imports array
this course was really helpful for me.
thanks a lot
Is it okay if I want to use just one module from angular material? Will my project size increase with just the one module that I added or will the entire angular material library size be added to my project size?
Please make a crash course on MEAN stack development
Yes please
I was using the flex layout and gave this error:ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15): error TS2416: Property '_registry' in type 'MockMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
Type 'Map' is not assignable to type 'Map'.
Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
Types of property 'removeListener' are incompatible.
Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
Types of parameters '_' and 'listener' are incompatible.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
Property 'handleEvent' is missing in type 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5): error TS2416: Property 'removeListener' in type 'MockMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'.
Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
Types of parameters '_' and 'listener' are incompatible.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,99): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,41): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,102): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(95,67): error TS2304: Cannot find name 'MediaQueryListEvent'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,5): error TS2416: Property 'removeListener' in type 'ServerMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'.
Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
Types of parameters '_' and 'listener' are incompatible.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(31,38): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(31,99): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,41): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,102): error TS2304: Cannot find name 'MediaQueryListEventMap'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(46,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
Type 'Map' is not assignable to type 'Map'.
Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
Types of property 'removeListener' are incompatible.
Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
Types of parameters '_' and 'listener' are incompatible.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(58,15): error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(60,67): error TS2304: Cannot find name 'MediaQueryListEvent'.
How can I disable Angular Material own styling? All of them! I don't need them... I have not found an answer to this question and because of this I am stuck... the material css is conflicting with the project's already existing styles.
Hey, thanks a lot for doing this video. It was really helpful for me to get started with this.
Thank you for sharing knowledge. It's really useful to naive users who Are interested to learn ui development.
What is the intro music from? I think that would be good for code focus
Tried: _@import "~@angular/material/prebuilt-themes/indigo-pink.css";_
What do you do if, you're not using CLI, I've added the link in the index.html page.
_BOTH_
icons and link to Mat Theme don't work for me.
Installing Material in this way I cant use fxLayout or fxFill entry the html components like "", What is missing in the installation?
Facing this error
after ng serve
ERROR in node_modules/@angular/material/button/typings/button.d.ts(32,44): error TS2304: Cannot find name 'FocusOptions'.
Great video, thanks so much!!
Thank Man, good lesson
Can't find the written tutorial of this. There is no exact link in the description. But thank's man really appreciate it.
hey, how did they (on material.angular.io) achieved the effect where buttons from top toolbar (Component, CDK, Guide) comes to the next row as tabbar when you hit the lower breakpoint ?
Thanks for this awesome simply to understand tutorial !
wow very useful tutorial.. now i am done. Thank you very much
Thank you very much for this class. Success!
Hi, and thanks for all your videos. But why not use cli and schematics. - "Schematics come packaged with Angular Material, so once you have installed the npm package, they will be available via the Angular CLI."
Hi,
thank you for your courses. after project creation It tells me that there are 13 vulnerabilities. what are these vulnerabilities and how do I correct it with the right way. I do not know if you had these vulnerabilities you too because in the video it is not indicated.
Thank you Gary! Keep up good work
Please make this course with Version 9. Since Ivy is introduced this nee course will state the changes.
Why did you install 'hammerjs' and why did you add it into 'main.ts'? Every things work fine in your tutorial without them.
I was waiting for this! Thanks
easier way to setup angular material in your application
after creating new angular project , just run
ng add @angular/material
This was an excellent, comprehensive tutorial - perfect if you're new to Angular. Thanks!
Notification Squad UNITE!! Once again, it's great having your videos! Im always learning with you! Thanks!
Thanks bro.. maybe u can upload how to make fully sidebar with angular material.. please
Thanks! Most required tutorial
Hey Gary..Thank you so much for this great video...
dude you are amazing, thanks for everything!!
Bro..how to move header content to secondary toolbar as angular material document site based on device width??
And how to add responsive grid cards(not one by one, eg: 3 cards to web and 1 card to Mobile)??
angular animation already installed in angular 6 by default. right?
/node_modules/@angular/platform-browser/platform-browser"' has no exported member 'HammerLoader'
Getting that error please help!!
thenks
great tutorial, thanks!
Wonderful tutorial.
very very nice, man, perfect tks.
muito bom cara está de parabéns, me ajudou muito. obrigado.
Finally it is usable but the documentation and unclear examples still suck :( thank you for the tutorial!
Awesome!,
Good Work Man..Please do a more comprehensive tutorial with MaterialUi..God bless you.
With Angular 6+ you can just type ng add @angular/material and forget all the initial setup.
Super Helpful thanks
Very usefull video -> thanks
ERROR Error: A drawer was already declared for 'position="start"'
at throwMatDuplicatedDrawerError
Many thanks to you!!!
where is the link to the written version? :)
Thanks.
Thanks bro...
placeholders please
Nice one! Keep it up. By the way, you forgot to empty the bottle ;)
npm install --save hammerjs doesnt work, send help
make sure it in correct directory
Thanks :)
You are save me, thanks
u r the best
You can also use ng add @anuglar/material
Yath Seanghay it's @angular/material
title
home
Home
Left Sidenav
Right Sidenav
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores similique veritatis atque reiciendis incidunt ut aut
asperiores, ratione quod voluptatum natus voluptatem maxime nam, quaerat blanditiis aperiam expedita eaque quasi.
left
right
the written version is:
coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App
angular. thanks
Bro do you workout?
You look buff :D
Although I love most of your videos, this one didn't make any sense.
Half of what you did in the beginning can be done with 1 command : ng add @angular/material.
That is the essence of Angular Material 6!
This video makes a lot of sense. As a beginner i hated when tutorials follow the line of thinking "just do ng add @angular/material and everything works!" without even explaining why or what's happening under the hood, all proud of the mysterious magic. "So simple!". It's indeed simpler but i'd love to understand what i'm doing, which i often do with videos like this one.
ng add @angular/material will also import stuff, edit your index.html and add the script tag, edit your style.css file and add the font/icons import which is nice, if you know what it does.
@Valentine Awe why are you watching this then twat, it's for beginners go eat shit someplace else.
@@luchinazo okay
@@luchinazo but learn to take corrections. okay. if the topic says angular 6. then teach angular 6.
Im getting a ton of warnings
Even though I installed all the dependencies, the cdk seems to not recognize angular/core
angular sucks
Buy a Mac bro
why
Frank Mazzarella easier to develop anything
Djamal Dg. Your an idiot
Djamal Dg. NOOO, please No dude
Djamal Dg Win is most universal os
Thank you very much, that was a great intro.