title
Learn Angular 7 in 50 Minutes - A Free Beginner's Crash Course

description
WRITTEN Version: https://goo.gl/a6kqBv Today's Question: Which do you prefer? React, Angular or Vue? https://skl.sh/designcourse2 - First 500 people to sign up will get their first 2 months free! -- Angular 7 just released and as always, I'm putting out a rather robust angular 7 tutorial (or small crash course!) that will introduce beginner's to this awesome frontend framework. You're going to learn about the basics behind Angular 7 while building out a simple project. Here's what you will learn: - Installation & the Angular CLI - Templating - Styling - Components - Event binding - Property binding - Services - HTTP Client - Forms ..and more The skills necessary to follow this course: - HTML & CSS Understanding - Basic JavaScript knowledge Github repo for the project in this tutorial: https://github.com/designcourse/ng7 - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-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!

detail
{'title': "Learn Angular 7 in 50 Minutes - A Free Beginner's Crash Course", 'heatmap': [{'end': 275.529, 'start': 206.372, 'weight': 0.905}, {'end': 793.521, 'start': 701.025, 'weight': 0.824}, {'end': 1097.925, 'start': 1035.751, 'weight': 0.729}, {'end': 1375.101, 'start': 1309.15, 'weight': 0.758}, {'end': 1532.835, 'start': 1463.169, 'weight': 0.748}, {'end': 1619.012, 'start': 1552.317, 'weight': 0.855}, {'end': 1895.123, 'start': 1728.113, 'weight': 0.819}, {'end': 1989.153, 'start': 1918.957, 'weight': 0.791}, {'end': 2135.618, 'start': 2006.698, 'weight': 0.824}, {'end': 2257.976, 'start': 2225.834, 'weight': 0.782}], 'summary': 'Learn angular 7 in 50 minutes crash course includes project demonstration, angular cli setup, css implementation, class and style binding, services and http client usage, form creation and deployment, emphasizing benefits of reactive forms and efficient code accessibility.', 'chapters': [{'end': 122.706, 'segs': [{'end': 77.853, 'src': 'embed', 'start': 22.43, 'weight': 0, 'content': [{'end': 30.331, 'text': "Now Skillshare is just 10 bucks a month, but if you're the first 200 students to use my very exclusive link below in the description here in YouTube,", 'start': 22.43, 'duration': 7.901}, {'end': 31.992, 'text': 'then you get the first two months free.', 'start': 30.331, 'duration': 1.661}, {'end': 33.532, 'text': "All right, so let's get started.", 'start': 32.232, 'duration': 1.3}, {'end': 34.092, 'text': 'Hey, everyone.', 'start': 33.712, 'duration': 0.38}, {'end': 35.733, 'text': 'Gary Simon of Corsetro.', 'start': 34.112, 'duration': 1.621}, {'end': 41.056, 'text': "So as always, whenever there's a brand new release of Angular, I do a crash course on it.", 'start': 35.813, 'duration': 5.243}, {'end': 45.138, 'text': 'And Angular 7 just released, I think, 24 hours ago.', 'start': 41.556, 'duration': 3.582}, {'end': 48.06, 'text': 'And I decided to really whip this up really quickly.', 'start': 45.158, 'duration': 2.902}, {'end': 49.621, 'text': "And it's about 50 minutes long.", 'start': 48.3, 'duration': 1.321}, {'end': 52.042, 'text': "And you're going to learn a lot.", 'start': 50.101, 'duration': 1.941}, {'end': 55.744, 'text': "And I'm going to make the assumption that you've never touched Angular before.", 'start': 52.182, 'duration': 3.562}, {'end': 56.444, 'text': 'All right.', 'start': 56.144, 'duration': 0.3}, {'end': 62.107, 'text': "So let me just show you and switch over to the browser real quick, and I'll show you the project that we're going to learn how to build.", 'start': 56.644, 'duration': 5.463}, {'end': 66.909, 'text': 'So this right here is pulling from a public test API.', 'start': 62.487, 'duration': 4.422}, {'end': 73.431, 'text': "So you're going to learn how to use the HTTP client library to make requests within Angular.", 'start': 66.929, 'duration': 6.502}, {'end': 75.532, 'text': "You're also going to learn about basic templating.", 'start': 73.792, 'duration': 1.74}, {'end': 77.853, 'text': "You're going to learn about routing as well.", 'start': 75.552, 'duration': 2.301}], 'summary': 'Angular 7 crash course: 50-min tutorial, 200 free first months on skillshare.', 'duration': 55.423, 'max_score': 22.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA22430.jpg'}, {'end': 136.036, 'src': 'embed', 'start': 104.64, 'weight': 3, 'content': [{'end': 105.84, 'text': 'let me know in the comments.', 'start': 104.64, 'duration': 1.2}, {'end': 111.381, 'text': "i'll let you know in the first pin comment for my answer to that question.", 'start': 105.84, 'duration': 5.541}, {'end': 115.822, 'text': 'also, make sure you check out the sponsor as well as my patreon account.', 'start': 111.381, 'duration': 4.441}, {'end': 116.963, 'text': 'make sure to subscribe.', 'start': 115.822, 'duration': 1.141}, {'end': 117.903, 'text': "i'll shut up now.", 'start': 116.963, 'duration': 0.94}, {'end': 118.583, 'text': "let's get started.", 'start': 117.903, 'duration': 0.68}, {'end': 119.123, 'text': 'All right.', 'start': 118.843, 'duration': 0.28}, {'end': 120.444, 'text': "so let's cover installation.", 'start': 119.123, 'duration': 1.321}, {'end': 122.706, 'text': 'Obviously, the first thing we want to concern ourselves with.', 'start': 120.524, 'duration': 2.182}, {'end': 130.192, 'text': "And so if you're going to install and get started up with Angular, with the Angular CLI or the command line interface,", 'start': 123.146, 'duration': 7.046}, {'end': 136.036, 'text': 'which is the preferable way to go, it makes it very easy, very less or minimal setup work involved in that.', 'start': 130.192, 'duration': 5.844}], 'summary': 'The speaker covers installation of angular using angular cli, emphasizing its ease and minimal setup work.', 'duration': 31.396, 'max_score': 104.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA104640.jpg'}], 'start': 0.149, 'title': 'Angular 7 crash course', 'summary': 'Covers a crash course on angular 7, offering benefits of skillshare, project demonstration, emphasizing http client library, basic templating, routing, and form utilization.', 'chapters': [{'end': 122.706, 'start': 0.149, 'title': 'Angular 7 crash course', 'summary': 'Covers a crash course on the brand new angular 7, including the offer and benefits of skillshare, the content of the course, and the project demonstration, emphasizing the use of http client library, basic templating, routing, and form utilization.', 'duration': 122.557, 'highlights': ['The course is about 50 minutes long, and it assumes the learner has never touched Angular before. The course duration is specified, providing an estimate of the time commitment, and the target audience is indicated.', 'Demonstrates the use of HTTP client library for making requests within Angular, as well as basic templating, routing, and form utilization. Specific topics covered in the course are highlighted, showcasing the practical skills the learners will acquire.', 'Skillshare offers thousands of classes in design, coding, business, and more, with a special offer of the first two months free for the first 200 students using an exclusive link. Details about the offer and benefits of Skillshare are mentioned, including the special offer for early sign-ups.', "Encourages viewers to engage by answering a question and promoting the sponsor and Patreon account. The content encourages viewer engagement and promotes the sponsor and the creator's Patreon account."]}], 'duration': 122.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA149.jpg', 'highlights': ['Covers a crash course on Angular 7 with emphasis on HTTP client library, basic templating, routing, and form utilization.', 'Skillshare offers thousands of classes in design, coding, business, and more, with a special offer of the first two months free for the first 200 students using an exclusive link.', 'The course is about 50 minutes long, and it assumes the learner has never touched Angular before.', 'Encourages viewers to engage by answering a question and promoting the sponsor and Patreon account.']}, {'end': 979.113, 'segs': [{'end': 146.563, 'src': 'embed', 'start': 123.146, 'weight': 0, 'content': [{'end': 130.192, 'text': "And so if you're going to install and get started up with Angular, with the Angular CLI or the command line interface,", 'start': 123.146, 'duration': 7.046}, {'end': 136.036, 'text': 'which is the preferable way to go, it makes it very easy, very less or minimal setup work involved in that.', 'start': 130.192, 'duration': 5.844}, {'end': 142.381, 'text': "Then you're going to need Node.js, which includes the Node Package Manager interface.", 'start': 136.056, 'duration': 6.325}, {'end': 146.563, 'text': 'or NPM, which will allow you to install the Angular CLI.', 'start': 142.721, 'duration': 3.842}], 'summary': 'Installing angular with cli is easy, requiring minimal setup work and node.js with npm.', 'duration': 23.417, 'max_score': 123.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA123146.jpg'}, {'end': 275.529, 'src': 'heatmap', 'start': 188.655, 'weight': 1, 'content': [{'end': 197.243, 'text': 'You can also run ng and then the name of the command and then hyphen help as it mentions right here for additional flags that you can pass through.', 'start': 188.655, 'duration': 8.588}, {'end': 205.511, 'text': "All right, so now with it installed, we're going to go ahead and hop into wherever you store your code projects and type in ng.", 'start': 197.263, 'duration': 8.248}, {'end': 213.899, 'text': "the new command that means a new project and then the name of the project so i'm going to call this ng7 for angular 7.", 'start': 206.372, 'duration': 7.527}, {'end': 218.643, 'text': "now, once we do this, it's going to ask us would you like to add angular routing?", 'start': 213.899, 'duration': 4.744}, {'end': 220.284, 'text': 'all right, so why, or yes?', 'start': 218.643, 'duration': 1.641}, {'end': 225.049, 'text': "so i'm going to say yes, because i want to have multiple pages and components that we can navigate to.", 'start': 220.284, 'duration': 4.765}, {'end': 228.61, 'text': 'And also, which style sheet format would you like to use?', 'start': 225.749, 'duration': 2.861}, {'end': 230.251, 'text': 'And you can use your arrow keys.', 'start': 229.01, 'duration': 1.241}, {'end': 232.672, 'text': "If you just want straight up CSS, that's fine.", 'start': 230.291, 'duration': 2.381}, {'end': 235.553, 'text': "We'll use SAS, which is SCSS here.", 'start': 232.972, 'duration': 2.581}, {'end': 237.053, 'text': 'And then hit Enter.', 'start': 236.193, 'duration': 0.86}, {'end': 239.174, 'text': "And then I'll go ahead and pause until this is finished.", 'start': 237.153, 'duration': 2.021}, {'end': 240.204, 'text': 'Okay, great.', 'start': 239.784, 'duration': 0.42}, {'end': 245.628, 'text': 'It is now finished, and what we can do now is cd into that new fault folder.', 'start': 240.264, 'duration': 5.364}, {'end': 248.47, 'text': "ng7 is the name, so we're going to cd into that.", 'start': 246.268, 'duration': 2.202}, {'end': 252.252, 'text': "And then what we're going to run is ng serve.", 'start': 249.27, 'duration': 2.982}, {'end': 257.036, 'text': 'And before doing this, though, I want to open up my code editor, which is Visual Studio Code.', 'start': 252.953, 'duration': 4.083}, {'end': 257.856, 'text': "It's from Microsoft.", 'start': 257.096, 'duration': 0.76}, {'end': 259.978, 'text': "It's free, very popular code editor.", 'start': 257.916, 'duration': 2.062}, {'end': 263.16, 'text': 'And the way I can open up that is, if you have it installed.', 'start': 259.998, 'duration': 3.162}, {'end': 268.463, 'text': 'you can just type in code period in the current folder and it will open that up automatically in that folder.', 'start': 263.16, 'duration': 5.303}, {'end': 269.224, 'text': "that's ready to go.", 'start': 268.463, 'duration': 0.761}, {'end': 270.064, 'text': 'All right.', 'start': 269.784, 'duration': 0.28}, {'end': 275.529, 'text': "So then after running that, we're going to run ng serve and then hyphen O, which is a flag for open.", 'start': 270.104, 'duration': 5.425}], 'summary': 'Setting up a new angular 7 project with angular routing and scss styles, then running it using ng serve.', 'duration': 25.244, 'max_score': 188.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA188655.jpg'}, {'end': 305.632, 'src': 'embed', 'start': 275.569, 'weight': 2, 'content': [{'end': 279.592, 'text': 'It will open your default browser at HTTP localhost 4200.', 'start': 275.569, 'duration': 4.023}, {'end': 283.315, 'text': "So this won't take too long.", 'start': 279.592, 'duration': 3.723}, {'end': 290.441, 'text': "So I'm not going to pause here, but basically it's compiling the project that it installed by default when we ran the ng new command.", 'start': 283.355, 'duration': 7.086}, {'end': 294.144, 'text': "And then it's going to open up a browser.", 'start': 291.201, 'duration': 2.943}, {'end': 295.805, 'text': "It's opening up off screen for me.", 'start': 294.344, 'duration': 1.461}, {'end': 305.632, 'text': "And this is the typical kind of ugly Angular landing page that we've come to know for, I think since Angular version four or two.", 'start': 296.245, 'duration': 9.387}], 'summary': 'The ng new command compiles the project and opens a browser at localhost 4200.', 'duration': 30.063, 'max_score': 275.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA275569.jpg'}, {'end': 351.934, 'src': 'embed', 'start': 324.183, 'weight': 3, 'content': [{'end': 328.705, 'text': 'This is pretty much since Angular 2+, and that is components.', 'start': 324.183, 'duration': 4.522}, {'end': 334.067, 'text': 'All right, so the most basic building blocks of your Angular 7 app are going to be components.', 'start': 329.145, 'duration': 4.922}, {'end': 344.591, 'text': 'And a component consists of three primary elements, and that is the HTML templating, Also the logic or the code associated with it,', 'start': 334.867, 'duration': 9.724}, {'end': 346.332, 'text': 'to make it dynamic and interactive.', 'start': 344.591, 'duration': 1.741}, {'end': 351.934, 'text': 'And then also the styling, which is like the CSS or the SAS if you chose a preprocessor like that.', 'start': 346.792, 'duration': 5.142}], 'summary': "Angular 7 app's basic building blocks are components with html, logic, and styling.", 'duration': 27.751, 'max_score': 324.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA324183.jpg'}, {'end': 398.594, 'src': 'embed', 'start': 367.76, 'weight': 4, 'content': [{'end': 375.443, 'text': "you're going to spend all your time pretty much in your source folder right here, all right, so we have assets that can go in here.", 'start': 367.76, 'duration': 7.683}, {'end': 379.845, 'text': "we're not going to touch this for this course and then we're going to work a lot in the app folder.", 'start': 375.443, 'duration': 4.402}, {'end': 384.447, 'text': 'this is where all your components go, as well as your services and stuff like that.', 'start': 379.845, 'duration': 4.602}, {'end': 386.608, 'text': 'As you can see,', 'start': 386.128, 'duration': 0.48}, {'end': 398.594, 'text': "we have an index.html right here and we could see that we have an app root and basically everything that's coming from this app component.ts file.", 'start': 386.608, 'duration': 11.986}], 'summary': 'The focus will be on working in the source folder, with components and services in the app folder.', 'duration': 30.834, 'max_score': 367.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA367760.jpg'}, {'end': 508.171, 'src': 'embed', 'start': 482.402, 'weight': 5, 'content': [{'end': 491.085, 'text': "alright, so Basically we're going to be using several different components for our app.", 'start': 482.402, 'duration': 8.683}, {'end': 499.268, 'text': 'Before we get to that part, though, I do just want to mention, looking at this structure, your components will consist of four different files,', 'start': 491.886, 'duration': 7.382}, {'end': 502.749, 'text': 'especially when you generate them with the Angular command line interface tool.', 'start': 499.268, 'duration': 3.481}, {'end': 508.171, 'text': 'The one that this one generated is just a single component called app.', 'start': 503.87, 'duration': 4.301}], 'summary': 'Using angular cli to generate four app components', 'duration': 25.769, 'max_score': 482.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA482402.jpg'}, {'end': 793.521, 'src': 'heatmap', 'start': 701.025, 'weight': 0.824, 'content': [{'end': 705.29, 'text': "And then we're going to get rid of everything with exception to this router outlet.", 'start': 701.025, 'duration': 4.265}, {'end': 712.677, 'text': "The router outlet is where other components will automatically load based on the route that we're currently at.", 'start': 705.73, 'duration': 6.947}, {'end': 715.861, 'text': "You'll see how it works if that's confusing to you in a second.", 'start': 712.697, 'duration': 3.164}, {'end': 724.847, 'text': "So what we're going to do is we're going to put in a custom HTML element based on the name or the selector property of the nav component.", 'start': 716.381, 'duration': 8.466}, {'end': 731.712, 'text': 'So the property name of that selector happens to be app hyphen nav.', 'start': 725.368, 'duration': 6.344}, {'end': 734.494, 'text': "All right, so we're going to save that.", 'start': 732.713, 'duration': 1.781}, {'end': 736.816, 'text': "We're also going to wrap this in section.", 'start': 735.275, 'duration': 1.541}, {'end': 742.292, 'text': 'And so let me show you real momentarily.', 'start': 739.571, 'duration': 2.721}, {'end': 748.993, 'text': "And by the way, this is just an HTML element that's going to allow us to style any content going inside of here.", 'start': 742.352, 'duration': 6.641}, {'end': 759.255, 'text': "So if I go back to our nav and we go to nav component or the main component file, we'll see the selector is app nav.", 'start': 749.393, 'duration': 9.862}, {'end': 760.415, 'text': "So that's where that came from.", 'start': 759.275, 'duration': 1.14}, {'end': 763.575, 'text': "That's how we can kind of nest components into other components.", 'start': 760.455, 'duration': 3.12}, {'end': 764.496, 'text': 'All right.', 'start': 764.175, 'duration': 0.321}, {'end': 766.876, 'text': "So let's go ahead back here.", 'start': 764.556, 'duration': 2.32}, {'end': 776.557, 'text': "And then at this point, let's specify the HTML to make this navigation work.", 'start': 769.572, 'duration': 6.985}, {'end': 777.338, 'text': 'All right.', 'start': 777.037, 'duration': 0.301}, {'end': 783.942, 'text': "So we're going to go to app or I'm sorry, nav.component.html and get rid of that sidebar.", 'start': 777.378, 'duration': 6.564}, {'end': 786.484, 'text': "I'm going to make this just a little bit larger here.", 'start': 783.962, 'duration': 2.522}, {'end': 789.357, 'text': 'and everything.', 'start': 787.996, 'duration': 1.361}, {'end': 793.521, 'text': "i'm just going to paste this from the written version of this, of this tutorial.", 'start': 789.357, 'duration': 4.164}], 'summary': 'The transcript discusses setting up a router outlet and adding a custom html element for navigation component.', 'duration': 92.496, 'max_score': 701.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA701025.jpg'}, {'end': 902.857, 'src': 'embed', 'start': 879.422, 'weight': 6, 'content': [{'end': 887.147, 'text': "And now we have just the raw ugly HTML from the nav that's being put in or nested in the main app component.", 'start': 879.422, 'duration': 7.725}, {'end': 891.51, 'text': "So let's say for instance, we wanted to make this dynamic for some reason.", 'start': 888.208, 'duration': 3.302}, {'end': 897.434, 'text': 'And we wanna define whatever this value is in the component, the nav component.ts file.', 'start': 892.23, 'duration': 5.204}, {'end': 902.857, 'text': 'Well, first we do this through interpolation and that basically means just printing out data.', 'start': 897.954, 'duration': 4.903}], 'summary': 'Raw html nested in main app component, made dynamic using interpolation in nav component.ts file.', 'duration': 23.435, 'max_score': 879.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA879422.jpg'}], 'start': 123.146, 'title': 'Angular cli and component structure', 'summary': 'Discusses the installation and setup of angular cli using node.js and npm, creating a new project, adding angular routing, and serving the project using ng serve command. it also covers the project setup, component structure, and component generation in angular, emphasizing the file structure, component decorator configuration, and templating with interpolation and router links.', 'chapters': [{'end': 346.332, 'start': 123.146, 'title': 'Getting started with angular cli', 'summary': 'Discusses the installation and setup of angular cli using node.js and npm, creating a new project, adding angular routing, and serving the project using ng serve command.', 'duration': 223.186, 'highlights': ['The chapter emphasizes the installation and setup of Angular CLI using Node.js and NPM, making it easy with minimal setup work involved. The Angular CLI installation with Node.js and NPM is highlighted as the preferable way to go, making the setup easy with minimal work involved.', "The process of creating a new project using the 'ng new' command and adding Angular routing is discussed. The process of creating a new project using the 'ng new' command and adding Angular routing is detailed, providing insight into the project setup.", "The usage of 'ng serve' command and opening the default browser at HTTP localhost 4200 is demonstrated for serving the project. The demonstration of using 'ng serve' command and opening the default browser at HTTP localhost 4200 for serving the project is highlighted.", 'The basic building blocks of Angular 7 app, components, are explained, consisting of HTML templating and associated logic or code for making it dynamic and interactive. The explanation of the basic building blocks of Angular 7 app, components, is provided, highlighting the elements of HTML templating and associated logic for interactivity.']}, {'end': 979.113, 'start': 346.792, 'title': 'Angular component structure', 'summary': 'Covers the project setup, component structure, and component generation in angular, emphasizing the file structure, component decorator configuration, and templating with interpolation and router links.', 'duration': 632.321, 'highlights': ['Angular component file structure and setup The source folder is the main focus for assets and components, with a specific file structure of HTML, SCSS, spec, and logic files for each component.', 'Component generation and folder structure The process of generating components in Angular automatically creates four files (HTML, SCSS, spec, and logic files) and organizes them into a new folder based on the component name.', 'Templating with interpolation and router links The use of interpolation for dynamic data display in the component template and the necessity of using router links instead of href for component navigation.']}], 'duration': 855.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA123146.jpg', 'highlights': ['The Angular CLI installation with Node.js and NPM is highlighted as the preferable way to go, making the setup easy with minimal work involved.', "The process of creating a new project using the 'ng new' command and adding Angular routing is detailed, providing insight into the project setup.", "The demonstration of using 'ng serve' command and opening the default browser at HTTP localhost 4200 for serving the project is highlighted.", 'The explanation of the basic building blocks of Angular 7 app, components, is provided, highlighting the elements of HTML templating and associated logic for interactivity.', 'The source folder is the main focus for assets and components, with a specific file structure of HTML, SCSS, spec, and logic files for each component.', 'The process of generating components in Angular automatically creates four files (HTML, SCSS, spec, and logic files) and organizes them into a new folder based on the component name.', 'The use of interpolation for dynamic data display in the component template and the necessity of using router links instead of href for component navigation.']}, {'end': 1382.367, 'segs': [{'end': 1097.925, 'src': 'heatmap', 'start': 1000.721, 'weight': 2, 'content': [{'end': 1007.604, 'text': "So the first thing we'll do, instead of going to this SAS file specific to here, I want to define some of the global CSS rule sets first.", 'start': 1000.721, 'duration': 6.883}, {'end': 1008.464, 'text': 'all right.', 'start': 1008.124, 'duration': 0.34}, {'end': 1017.346, 'text': "so i i'm going to copy from the written version of this tutorial and paste right here just some very basic rule sets.", 'start': 1008.464, 'duration': 8.882}, {'end': 1018.166, 'text': "we're just setting some.", 'start': 1017.346, 'duration': 0.82}, {'end': 1020.867, 'text': 'uh, you know the body and html elements.', 'start': 1018.166, 'duration': 2.701}, {'end': 1023.168, 'text': 'uh, text decoration, none.', 'start': 1020.867, 'duration': 2.301}, {'end': 1026.608, 'text': 'our container that we referenced the container class.', 'start': 1023.168, 'duration': 3.44}, {'end': 1028.388, 'text': 'nothing crazy has happened.', 'start': 1026.608, 'duration': 1.78}, {'end': 1035.751, 'text': "we're using display grid just to structure, um, that top nav area from the logo in the, the navigation steps, stuff like that,", 'start': 1028.388, 'duration': 7.363}, {'end': 1037.05, 'text': 'as well as the section element.', 'start': 1035.751, 'duration': 1.299}, {'end': 1037.931, 'text': 'All right,', 'start': 1037.651, 'duration': 0.28}, {'end': 1040.875, 'text': "So let's save that and then we're going to go back.", 'start': 1038.192, 'duration': 2.683}, {'end': 1045.31, 'text': "And by the way, we'll see that some stuff has changed.", 'start': 1041.454, 'duration': 3.856}, {'end': 1050.055, 'text': 'Obviously we need to work a little bit more on making that actually work.', 'start': 1046.412, 'duration': 3.643}, {'end': 1054.019, 'text': "So let's go back to our nav components SCSS file.", 'start': 1050.095, 'duration': 3.924}, {'end': 1055.32, 'text': 'All right.', 'start': 1055.04, 'duration': 0.28}, {'end': 1066.35, 'text': "So in there, once again, I'm going to paste in just some rule sets based on SAS, very simple stuff, nothing crazy happening here.", 'start': 1055.38, 'duration': 10.97}, {'end': 1072.193, 'text': 'So if we save this, And let me just get this back out to 100%.', 'start': 1066.951, 'duration': 5.242}, {'end': 1072.773, 'text': 'There we go.', 'start': 1072.193, 'duration': 0.58}, {'end': 1075.495, 'text': 'Our simple, simple, simple app.', 'start': 1072.954, 'duration': 2.541}, {'end': 1078.077, 'text': 'So currently none of these work.', 'start': 1075.575, 'duration': 2.502}, {'end': 1081.6, 'text': 'even though we have the router link pointing to a direction.', 'start': 1078.077, 'duration': 3.523}, {'end': 1086.263, 'text': "we haven't done the setup work to get the routing actually working.", 'start': 1081.6, 'duration': 4.663}, {'end': 1087.324, 'text': "So let's talk about that.", 'start': 1086.303, 'duration': 1.021}, {'end': 1093.862, 'text': "So now that we have our navigation, Let's go ahead and open up the app routing file.", 'start': 1087.924, 'duration': 5.938}, {'end': 1097.925, 'text': 'So when we started this project with the Angular command line interface?', 'start': 1094.282, 'duration': 3.643}], 'summary': 'Defining global css rule sets and working on app routing for an angular project.', 'duration': 44.589, 'max_score': 1000.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1000721.jpg'}, {'end': 1105.429, 'src': 'embed', 'start': 1075.575, 'weight': 0, 'content': [{'end': 1078.077, 'text': 'So currently none of these work.', 'start': 1075.575, 'duration': 2.502}, {'end': 1081.6, 'text': 'even though we have the router link pointing to a direction.', 'start': 1078.077, 'duration': 3.523}, {'end': 1086.263, 'text': "we haven't done the setup work to get the routing actually working.", 'start': 1081.6, 'duration': 4.663}, {'end': 1087.324, 'text': "So let's talk about that.", 'start': 1086.303, 'duration': 1.021}, {'end': 1093.862, 'text': "So now that we have our navigation, Let's go ahead and open up the app routing file.", 'start': 1087.924, 'duration': 5.938}, {'end': 1097.925, 'text': 'So when we started this project with the Angular command line interface?', 'start': 1094.282, 'duration': 3.643}, {'end': 1102.087, 'text': 'it asked us after we entered or issued the ng new command.', 'start': 1097.925, 'duration': 4.162}, {'end': 1105.429, 'text': 'it asked us if we wanted to have the router added to this project.', 'start': 1102.087, 'duration': 3.342}], 'summary': 'The routing setup for the angular project is not complete, despite the initial configuration with the angular cli.', 'duration': 29.854, 'max_score': 1075.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1075575.jpg'}, {'end': 1276.261, 'src': 'embed', 'start': 1252.261, 'weight': 1, 'content': [{'end': 1261.429, 'text': "Now, in the next several sections, we're going to be using our app, our home component, rather sort of as a testing slash playground section,", 'start': 1252.261, 'duration': 9.168}, {'end': 1266.954, 'text': "to where I can show you some specific features to Angular 7 that you're eventually going to want to learn to know.", 'start': 1261.429, 'duration': 5.525}, {'end': 1271.017, 'text': 'These are common concepts for Angular and Angular 7.', 'start': 1267.014, 'duration': 4.003}, {'end': 1276.261, 'text': 'So one of the most used forms of event binding is a click event.', 'start': 1271.017, 'duration': 5.244}], 'summary': 'Using the app to demonstrate specific angular 7 features, focusing on common event binding like click events.', 'duration': 24, 'max_score': 1252.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1252261.jpg'}, {'end': 1375.101, 'src': 'heatmap', 'start': 1309.15, 'weight': 0.758, 'content': [{'end': 1315.218, 'text': 'And then the way we, we get event binding working is we wrap the name of the particular event.', 'start': 1309.15, 'duration': 6.068}, {'end': 1324.351, 'text': "In our case, this is going to be a click based event with parentheses and we bind it to a method and we'll call this one first click.", 'start': 1315.258, 'duration': 9.093}, {'end': 1326.29, 'text': 'All right.', 'start': 1325.99, 'duration': 0.3}, {'end': 1328.933, 'text': "And then we'll give it a value of click me.", 'start': 1326.37, 'duration': 2.563}, {'end': 1330.335, 'text': 'All right.', 'start': 1330.054, 'duration': 0.281}, {'end': 1331.496, 'text': "So we'll save that.", 'start': 1330.495, 'duration': 1.001}, {'end': 1338.984, 'text': "And then we're going to go back to our home component TypeScript file where our logic will reside.", 'start': 1332.057, 'duration': 6.927}, {'end': 1343.769, 'text': 'So now we create that method that we referenced on the click event called first click.', 'start': 1339.485, 'duration': 4.284}, {'end': 1348.134, 'text': "And we'll just console log clicked.", 'start': 1345.491, 'duration': 2.643}, {'end': 1352.46, 'text': 'All right, so make sure that both of those files have been saved.', 'start': 1349.892, 'duration': 2.568}, {'end': 1355.369, 'text': 'And we hit Control Shift I.', 'start': 1353.262, 'duration': 2.107}, {'end': 1356.693, 'text': 'We have our console up here.', 'start': 1355.369, 'duration': 1.324}, {'end': 1357.275, 'text': "We'll click it.", 'start': 1356.753, 'duration': 0.522}, {'end': 1359.048, 'text': 'there we go.', 'start': 1358.047, 'duration': 1.001}, {'end': 1360.249, 'text': 'very exciting stuff.', 'start': 1359.048, 'duration': 1.201}, {'end': 1361.81, 'text': 'it worked all right.', 'start': 1360.249, 'duration': 1.561}, {'end': 1366.234, 'text': 'so, um, there are a lot of other different types of click events.', 'start': 1361.81, 'duration': 4.424}, {'end': 1375.101, 'text': "so from the written tutorial i've put those right here so you can do focus on blur, on scroll, cut, copy, paste, key up down, mouse center,", 'start': 1366.234, 'duration': 8.867}], 'summary': "Demonstrating event binding for click event, with method binding called 'first click', resulting in successful console log upon clicking", 'duration': 65.951, 'max_score': 1309.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1309150.jpg'}], 'start': 979.113, 'title': 'Implementing css for horizontal navigation bar and angular routing and event binding', 'summary': 'Covers the implementation of basic css rule sets for a horizontal navigation bar and a section element using display grid, along with setting up routing for an angular app and implementing event binding for a button click, leading to successful navigation to different components and console logging of button click event.', 'chapters': [{'end': 1075.495, 'start': 979.113, 'title': 'Implementing css for horizontal navigation bar', 'summary': 'Focuses on implementing basic css rule sets for a horizontal navigation bar and a section element using display grid, with the code being pasted from the written version of the tutorial.', 'duration': 96.382, 'highlights': ['Implementing basic CSS rule sets for the top navigation area and section element using display grid. The tutorial covers the implementation of basic CSS rule sets, including setting text decoration to none and using display grid for structuring the top nav area and section element.', 'Pasting CSS code from the written version of the tutorial to define global CSS rule sets. The speaker mentions pasting CSS code from the written version of the tutorial to define global CSS rule sets for the body, html, and container class.']}, {'end': 1382.367, 'start': 1075.575, 'title': 'Angular routing and event binding', 'summary': 'Discusses setting up routing for angular app and implementing event binding for a button click, resulting in successful navigation to different components and console logging of button click event.', 'duration': 306.792, 'highlights': ["The chapter explains setting up routing for different components in an Angular app, resulting in successful navigation to 'home', 'about', and 'contact' components. The app-routing.module.ts file is used to define individual routes for 'home', 'about', and 'contact' components, enabling successful navigation between these components.", "The chapter demonstrates event binding for a button click in an Angular app, resulting in console logging 'clicked' when the button is clicked. The 'click' event binding is implemented in the home component's HTML file, which triggers the 'first click' method in the home component's TypeScript file, resulting in successful console logging of 'clicked' when the button is clicked."]}], 'duration': 403.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA979113.jpg', 'highlights': ["Setting up routing for different components in an Angular app, enabling successful navigation to 'home', 'about', and 'contact' components.", "Implementing event binding for a button click in an Angular app, resulting in console logging of 'clicked' when the button is clicked.", 'Implementing basic CSS rule sets for the top navigation area and section element using display grid, including setting text decoration to none and using display grid for structuring the top nav area and section element.', 'Pasting CSS code from the written version of the tutorial to define global CSS rule sets for the body, html, and container class.']}, {'end': 1707.071, 'segs': [{'end': 1414.325, 'src': 'embed', 'start': 1382.947, 'weight': 2, 'content': [{'end': 1386.75, 'text': "Now let's also talk about Angular's class and style binding.", 'start': 1382.947, 'duration': 3.803}, {'end': 1394.836, 'text': 'So sometimes you may need to change the appearance of your UI from your component logic or based on some user interactivity of sorts.', 'start': 1387.19, 'duration': 7.646}, {'end': 1396.157, 'text': "So there's two ways to do this.", 'start': 1394.896, 'duration': 1.261}, {'end': 1399.08, 'text': 'You could do it through class binding or style binding.', 'start': 1396.197, 'duration': 2.883}, {'end': 1399.8, 'text': 'All right.', 'start': 1399.54, 'duration': 0.26}, {'end': 1403.701, 'text': 'So there are a lot of different methods you can use to control class binding.', 'start': 1399.86, 'duration': 3.841}, {'end': 1409.083, 'text': "So I'm not going to cover all of them, but I will cover the two most common use cases for this.", 'start': 1404.361, 'duration': 4.722}, {'end': 1414.325, 'text': "So let's say that you want to control whether or not a CSS class is applied to a given element.", 'start': 1409.123, 'duration': 5.202}], 'summary': "Angular's class and style binding offers two ways to change ui appearance based on component logic or user interactivity.", 'duration': 31.378, 'max_score': 1382.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1382947.jpg'}, {'end': 1463.169, 'src': 'embed', 'start': 1429.49, 'weight': 4, 'content': [{'end': 1432.011, 'text': 'And this is based on attribute binding class.', 'start': 1429.49, 'duration': 2.521}, {'end': 1438.478, 'text': "dot let's say there's a class called gray in our SAS file.", 'start': 1433.234, 'duration': 5.244}, {'end': 1448.867, 'text': "And we want to show it based on whether or not a given property that's bound right here is true or false.", 'start': 1439.459, 'duration': 9.408}, {'end': 1451.228, 'text': "Alright, so we're just going to call this h1 style.", 'start': 1449.547, 'duration': 1.681}, {'end': 1463.169, 'text': 'right. so gray is only going to be attached to this h1 class if h1 style a boolean uh property equals, true, all right.', 'start': 1452.901, 'duration': 10.268}], 'summary': "Using attribute binding class to show 'gray' class based on boolean property.", 'duration': 33.679, 'max_score': 1429.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1429490.jpg'}, {'end': 1532.835, 'src': 'heatmap', 'start': 1463.169, 'weight': 0.748, 'content': [{'end': 1469.274, 'text': "so let's save that and let's go back to our home component file right here.", 'start': 1463.169, 'duration': 6.105}, {'end': 1472.676, 'text': "and we're going to set this up right here.", 'start': 1469.274, 'duration': 3.402}, {'end': 1478.06, 'text': "h1 style it's of type boolean and it equals false by default.", 'start': 1472.676, 'duration': 5.384}, {'end': 1482.941, 'text': "So when the page loads, it's not going to attach that gray class to it.", 'start': 1478.22, 'duration': 4.721}, {'end': 1483.941, 'text': 'All right.', 'start': 1483.641, 'duration': 0.3}, {'end': 1487.662, 'text': "So when somebody clicks on that button, let's remove this line.", 'start': 1484.041, 'duration': 3.621}, {'end': 1491.723, 'text': "Let's say this dot H1 style equals true.", 'start': 1487.962, 'duration': 3.761}, {'end': 1501.905, 'text': "And then finally, let's go ahead and define in this component's SAS file that gray class just like this.", 'start': 1493.203, 'duration': 8.702}, {'end': 1504.106, 'text': "So we're only going to change the color to gray.", 'start': 1501.945, 'duration': 2.161}, {'end': 1510.67, 'text': "So save all that and we'll go back here and we'll click it.", 'start': 1505.41, 'duration': 5.26}, {'end': 1512.369, 'text': 'There we go.', 'start': 1511.749, 'duration': 0.62}, {'end': 1516.931, 'text': "Of course it doesn't toggle, although you could integrate that functionality if you wanted to.", 'start': 1512.809, 'duration': 4.122}, {'end': 1518.251, 'text': 'All right.', 'start': 1517.971, 'duration': 0.28}, {'end': 1525.293, 'text': "So let's say what if you wanted to control multiple classes on a given element?", 'start': 1518.711, 'duration': 6.582}, {'end': 1532.835, 'text': "Well, we use ng class instead and it's set up slightly different, but it's very easy to use nonetheless.", 'start': 1525.593, 'duration': 7.242}], 'summary': 'Using ng-class to control multiple classes on elements, making styling changes in angular component.', 'duration': 69.666, 'max_score': 1463.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1463169.jpg'}, {'end': 1518.251, 'src': 'embed', 'start': 1493.203, 'weight': 1, 'content': [{'end': 1501.905, 'text': "And then finally, let's go ahead and define in this component's SAS file that gray class just like this.", 'start': 1493.203, 'duration': 8.702}, {'end': 1504.106, 'text': "So we're only going to change the color to gray.", 'start': 1501.945, 'duration': 2.161}, {'end': 1510.67, 'text': "So save all that and we'll go back here and we'll click it.", 'start': 1505.41, 'duration': 5.26}, {'end': 1512.369, 'text': 'There we go.', 'start': 1511.749, 'duration': 0.62}, {'end': 1516.931, 'text': "Of course it doesn't toggle, although you could integrate that functionality if you wanted to.", 'start': 1512.809, 'duration': 4.122}, {'end': 1518.251, 'text': 'All right.', 'start': 1517.971, 'duration': 0.28}], 'summary': "Define gray class in component's sas file, change color to gray, and integrate toggling functionality.", 'duration': 25.048, 'max_score': 1493.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1493203.jpg'}, {'end': 1619.012, 'src': 'heatmap', 'start': 1552.317, 'weight': 0.855, 'content': [{'end': 1564.901, 'text': "So the gray class will say, is I only gonna show for if H1 style is true, I'm gonna hit shift all in the down arrow key here to duplicate that.", 'start': 1552.317, 'duration': 12.584}, {'end': 1569.262, 'text': "And we'll have a second class that we haven't yet defined called large.", 'start': 1565.421, 'duration': 3.841}, {'end': 1575.462, 'text': "And this will only show up if H1 style is not true or if it's false.", 'start': 1569.762, 'duration': 5.7}, {'end': 1576.382, 'text': 'All right.', 'start': 1576.102, 'duration': 0.28}, {'end': 1585.207, 'text': "So now let's go back real quickly and we'll add our large class right here.", 'start': 1576.602, 'duration': 8.605}, {'end': 1592.491, 'text': 'So when we go to this, it should be real large by default because when it loads up, we have that property set to false.', 'start': 1586.608, 'duration': 5.883}, {'end': 1595.713, 'text': 'Okay And there we go.', 'start': 1594.112, 'duration': 1.601}, {'end': 1602.837, 'text': 'So now if I click this, it obviously removes the large class and adds the gray class.', 'start': 1596.253, 'duration': 6.584}, {'end': 1607.645, 'text': 'All right, so now what about changing the style??', 'start': 1603.442, 'duration': 4.203}, {'end': 1619.012, 'text': 'All right, so instead of relying on a separate CSS or SAS file for classes, you can actually change inline CSS through the styles.', 'start': 1608.205, 'duration': 10.807}], 'summary': 'Demonstrates conditional display of classes and inline css manipulation.', 'duration': 66.695, 'max_score': 1552.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1552317.jpg'}, {'end': 1707.071, 'src': 'embed', 'start': 1641.901, 'weight': 0, 'content': [{'end': 1649.023, 'text': "If h1 style is true, which is the question mark here, then we will say it's gray.", 'start': 1641.901, 'duration': 7.122}, {'end': 1654.204, 'text': 'And then otherwise, if not, it will be black.', 'start': 1649.043, 'duration': 5.161}, {'end': 1658.25, 'text': 'And as we can see, if we click it, it works just the same.', 'start': 1654.907, 'duration': 3.343}, {'end': 1667.379, 'text': "Now, we can also, like there is an ng-class, there's also an ng-style for controlling multiple CSS properties in much the same way.", 'start': 1658.711, 'duration': 8.668}, {'end': 1674.406, 'text': "So we just simply put in ng-style, and then we'll take this out, and we'll put in..", 'start': 1667.799, 'duration': 6.607}, {'end': 1676.988, 'text': 'Oh, stop it.', 'start': 1674.406, 'duration': 2.582}, {'end': 1677.549, 'text': 'There we go.', 'start': 1677.008, 'duration': 0.541}, {'end': 1687.047, 'text': 'another object here, and then this time it is each line will represent a different CSS property.', 'start': 1678.966, 'duration': 8.081}, {'end': 1704.49, 'text': "so we'll say h1 style and it will be gray, if not, then black, and then this one will be size and we'll say if it doesn't exist, then it will be 1 em,", 'start': 1687.047, 'duration': 17.443}, {'end': 1707.071, 'text': 'otherwise 4 em in terms of size.', 'start': 1704.49, 'duration': 2.581}], 'summary': 'Using ng-style to control css properties, such as h1 style color and size, based on conditions.', 'duration': 65.17, 'max_score': 1641.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1641901.jpg'}], 'start': 1382.947, 'title': "Angular's class and style binding", 'summary': "Discusses angular's class and style binding, covering the two ways to change ui appearance from component logic, and highlighting the process of controlling class binding based on boolean property. it also introduces ng-class and ng-style, demonstrating how to control multiple classes and inline css properties, with examples of setting up conditional css classes and binding css properties based on conditions.", 'chapters': [{'end': 1518.251, 'start': 1382.947, 'title': 'Angular class and style binding', 'summary': "Discusses angular's class and style binding, explaining the two ways to change ui appearance from component logic, covering the most common use cases with examples and highlighting the process of controlling class binding based on boolean property.", 'duration': 135.304, 'highlights': ['The chapter covers the two most common use cases for class binding in Angular, demonstrating how to control whether a CSS class is applied to an element based on a boolean property, with the default value of the property set to false.', "It explains the process of updating the H1 element in the home component template file using attribute binding to control the application of the 'gray' class based on the boolean property 'h1 style', with the class being attached only if the property equals true.", "The demonstration includes defining the 'gray' class in the component's SAS file to change the color to gray, resulting in the application of the class to the H1 element when the boolean property is set to true."]}, {'end': 1707.071, 'start': 1518.711, 'title': 'Angular ng-class and ng-style', 'summary': 'Introduces ng-class and ng-style in angular, demonstrating how to control multiple classes and inline css properties, with examples of setting up conditional css classes and binding css properties based on conditions.', 'duration': 188.36, 'highlights': ['The ng-class directive is used to control multiple classes on an element, allowing for the setup of conditional CSS classes, such as displaying the gray class when H1 style is true and the large class when H1 style is not true.', 'The ng-style directive enables the inline control of multiple CSS properties, with examples of binding the color property based on the condition of h1 style being true or false, and setting the size property to 1 em or 4 em based on its existence.', 'Demonstrates the use of ng-class and ng-style to dynamically change the appearance of elements based on conditions, providing a practical demonstration of these Angular directives for managing CSS classes and inline styles.']}], 'duration': 324.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1382947.jpg', 'highlights': ['The ng-class directive is used to control multiple classes on an element, allowing for the setup of conditional CSS classes, such as displaying the gray class when H1 style is true and the large class when H1 style is not true.', "The demonstration includes defining the 'gray' class in the component's SAS file to change the color to gray, resulting in the application of the class to the H1 element when the boolean property is set to true.", 'The chapter covers the two most common use cases for class binding in Angular, demonstrating how to control whether a CSS class is applied to an element based on a boolean property, with the default value of the property set to false.', 'The ng-style directive enables the inline control of multiple CSS properties, with examples of binding the color property based on the condition of h1 style being true or false, and setting the size property to 1 em or 4 em based on its existence.', "It explains the process of updating the H1 element in the home component template file using attribute binding to control the application of the 'gray' class based on the boolean property 'h1 style', with the class being attached only if the property equals true.", 'Demonstrates the use of ng-class and ng-style to dynamically change the appearance of elements based on conditions, providing a practical demonstration of these Angular directives for managing CSS classes and inline styles.']}, {'end': 2225.194, 'segs': [{'end': 1762.7, 'src': 'embed', 'start': 1728.113, 'weight': 0, 'content': [{'end': 1738.222, 'text': 'So services in Angular 7 allow you to define code that needs to be accessible across multiple components in a central location, essentially.', 'start': 1728.113, 'duration': 10.109}, {'end': 1747.489, 'text': "So the way we generate a service file is we're going to come to, let me hit Control-B here.", 'start': 1738.982, 'duration': 8.507}, {'end': 1749.211, 'text': "We're going to view our terminal.", 'start': 1748.03, 'duration': 1.181}, {'end': 1756.055, 'text': 'and we use our generate command.', 'start': 1751.711, 'duration': 4.344}, {'end': 1762.7, 'text': "so it's going to be ng g for generate s, for service and the name.", 'start': 1756.055, 'duration': 6.645}], 'summary': 'Angular 7 services centralize code for multi-component access.', 'duration': 34.587, 'max_score': 1728.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1728113.jpg'}, {'end': 1895.123, 'src': 'heatmap', 'start': 1728.113, 'weight': 0.819, 'content': [{'end': 1738.222, 'text': 'So services in Angular 7 allow you to define code that needs to be accessible across multiple components in a central location, essentially.', 'start': 1728.113, 'duration': 10.109}, {'end': 1747.489, 'text': "So the way we generate a service file is we're going to come to, let me hit Control-B here.", 'start': 1738.982, 'duration': 8.507}, {'end': 1749.211, 'text': "We're going to view our terminal.", 'start': 1748.03, 'duration': 1.181}, {'end': 1756.055, 'text': 'and we use our generate command.', 'start': 1751.711, 'duration': 4.344}, {'end': 1762.7, 'text': "so it's going to be ng g for generate s, for service and the name.", 'start': 1756.055, 'duration': 6.645}, {'end': 1767.224, 'text': "we'll call this data all right.", 'start': 1762.7, 'duration': 4.524}, {'end': 1771.868, 'text': "so then we're going to open up and it tells us you know exactly what it created and where it created.", 'start': 1767.224, 'duration': 4.644}, {'end': 1778.133, 'text': "we're going to open this up and right here we're going to go to our data service ts file,", 'start': 1771.868, 'duration': 6.265}, {'end': 1784.881, 'text': 'And it looks very much like a typical component with your imports, a decorator in your class here,', 'start': 1779.4, 'duration': 5.481}, {'end': 1790.603, 'text': 'except this is an injectable decorator instead of a component decorator.', 'start': 1784.881, 'duration': 5.722}, {'end': 1791.403, 'text': 'All right.', 'start': 1791.123, 'duration': 0.28}, {'end': 1795.684, 'text': "And so now let's create a method just to give this a quick test here.", 'start': 1791.623, 'duration': 4.061}, {'end': 1798.105, 'text': "So we'll just name this first click again.", 'start': 1796.104, 'duration': 2.001}, {'end': 1802.986, 'text': "And we're going to return console log clicked.", 'start': 1798.125, 'duration': 4.861}, {'end': 1806.139, 'text': "So we'll save that.", 'start': 1805.339, 'duration': 0.8}, {'end': 1813.763, 'text': "And then to use this in any of our components, we'll visit the component that we want to access this particular service from.", 'start': 1806.76, 'duration': 7.003}, {'end': 1819.025, 'text': 'And so in our case, it will be our home TypeScript file.', 'start': 1813.783, 'duration': 5.242}, {'end': 1824.928, 'text': "We're going to import the data service from the location of the file right there in that line.", 'start': 1819.565, 'duration': 5.363}, {'end': 1828.549, 'text': "All right and then we're going to.", 'start': 1826.428, 'duration': 2.121}, {'end': 1835.493, 'text': "in order to gain access to it, we do what's called creating instance of it through dependency injection in the constructor.", 'start': 1828.549, 'duration': 6.944}, {'end': 1838.855, 'text': "Now, if that sounds scary and you never heard of it before, don't worry, it's not really.", 'start': 1835.553, 'duration': 3.302}, {'end': 1843.358, 'text': "We're just gonna say private data, and then it's bound to data service.", 'start': 1838.875, 'duration': 4.483}, {'end': 1851.243, 'text': 'So now whenever we wanna access methods and such from our data service, we just reference this.data.', 'start': 1843.398, 'duration': 7.845}, {'end': 1853.184, 'text': 'and then the name of the method.', 'start': 1851.483, 'duration': 1.701}, {'end': 1860.007, 'text': "alright. so in this case our first click method at defined here I probably shouldn't use the same name,", 'start': 1853.664, 'duration': 6.343}, {'end': 1864.469, 'text': "but nonetheless this dot data and we'll see it showing up automatically for us here.", 'start': 1860.007, 'duration': 4.462}, {'end': 1868.31, 'text': 'first click, just like that, alright.', 'start': 1864.469, 'duration': 3.841}, {'end': 1873.813, 'text': "so now we're console logging it in the data service and we'll know it will work or will have worked.", 'start': 1868.31, 'duration': 5.503}, {'end': 1881.016, 'text': 'if we look at the console, when we click this alright and there we go, we can see that it works.', 'start': 1873.813, 'duration': 7.203}, {'end': 1894.263, 'text': 'and Now you understand a pattern where you can define properties and methods inside of a central location that you can now access from multiple different components,', 'start': 1881.016, 'duration': 13.247}, {'end': 1895.123, 'text': 'which is very handy.', 'start': 1894.263, 'duration': 0.86}], 'summary': 'Angular 7 services allow defining reusable code across components, accessed via dependency injection.', 'duration': 167.01, 'max_score': 1728.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1728113.jpg'}, {'end': 1851.243, 'src': 'embed', 'start': 1819.565, 'weight': 2, 'content': [{'end': 1824.928, 'text': "We're going to import the data service from the location of the file right there in that line.", 'start': 1819.565, 'duration': 5.363}, {'end': 1828.549, 'text': "All right and then we're going to.", 'start': 1826.428, 'duration': 2.121}, {'end': 1835.493, 'text': "in order to gain access to it, we do what's called creating instance of it through dependency injection in the constructor.", 'start': 1828.549, 'duration': 6.944}, {'end': 1838.855, 'text': "Now, if that sounds scary and you never heard of it before, don't worry, it's not really.", 'start': 1835.553, 'duration': 3.302}, {'end': 1843.358, 'text': "We're just gonna say private data, and then it's bound to data service.", 'start': 1838.875, 'duration': 4.483}, {'end': 1851.243, 'text': 'So now whenever we wanna access methods and such from our data service, we just reference this.data.', 'start': 1843.398, 'duration': 7.845}], 'summary': 'Import data service and create instance through dependency injection.', 'duration': 31.678, 'max_score': 1819.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1819565.jpg'}, {'end': 1989.153, 'src': 'heatmap', 'start': 1907.49, 'weight': 3, 'content': [{'end': 1914.934, 'text': 'So Angular comes with its own HTTP library that we will use to communicate with the fake API service,', 'start': 1907.49, 'duration': 7.444}, {'end': 1918.497, 'text': 'to grab some data and then display it in the home template.', 'start': 1914.934, 'duration': 3.563}, {'end': 1924.24, 'text': 'All right, so this will take place within that data service that we already generated with the CLI.', 'start': 1918.957, 'duration': 5.283}, {'end': 1932.965, 'text': 'Now, in order to gain access to this HTTP client library, we have to first visit our app module TS file up here.', 'start': 1924.8, 'duration': 8.165}, {'end': 1936.507, 'text': "Right there, it's in the source folder.", 'start': 1934.606, 'duration': 1.901}, {'end': 1943.152, 'text': 'And then up here, just underneath.', 'start': 1939.15, 'duration': 4.002}, {'end': 1952.078, 'text': "here it doesn't really matter where you put it we're going to import the HTTP client module from right here, which is Angular common HTTP.", 'start': 1943.152, 'duration': 8.926}, {'end': 1954.419, 'text': 'And then we add it to the imports array.', 'start': 1952.678, 'duration': 1.741}, {'end': 1956.709, 'text': 'this right here.', 'start': 1955.908, 'duration': 0.801}, {'end': 1958.53, 'text': "And that's all you have to do.", 'start': 1957.69, 'duration': 0.84}, {'end': 1963.295, 'text': 'You only have to do this once whenever you need to use the HTTP client module.', 'start': 1958.55, 'duration': 4.745}, {'end': 1964.095, 'text': 'All right.', 'start': 1963.875, 'duration': 0.22}, {'end': 1970.181, 'text': "And then I, we're going to visit our app data dot service file that we created.", 'start': 1964.576, 'duration': 5.605}, {'end': 1971.142, 'text': 'All right.', 'start': 1970.201, 'duration': 0.941}, {'end': 1975.986, 'text': 'So if we want to use and gain access to the HTTP client, we have to import it up here.', 'start': 1971.202, 'duration': 4.784}, {'end': 1981.651, 'text': "So it's the HTTP client this time from Angular common HTTP.", 'start': 1977.29, 'duration': 4.361}, {'end': 1989.153, 'text': "And then also, we're going to, once again, through dependency injection, create an instance of it, private.", 'start': 1982.551, 'duration': 6.602}], 'summary': "Using angular's http library to access and display data from a fake api in the home template.", 'duration': 25.475, 'max_score': 1907.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1907490.jpg'}, {'end': 2135.618, 'src': 'heatmap', 'start': 2006.698, 'weight': 0.824, 'content': [{'end': 2019.209, 'text': "And we're going to get, and then we're going to, I'm going to hit up a, just a kind of a fake API testing service called reqres.in.", 'start': 2006.698, 'duration': 12.511}, {'end': 2024.074, 'text': 'You can go to that URL, by the way, and they give you a bunch of different endpoints that you can use for testing.', 'start': 2019.229, 'duration': 4.845}, {'end': 2027.156, 'text': "All right, and so that's all our data service is right now.", 'start': 2024.734, 'duration': 2.422}, {'end': 2034.141, 'text': 'Obviously, if you had different endpoints, you would define them in the form of different methods in this file.', 'start': 2028.097, 'duration': 6.044}, {'end': 2038.384, 'text': "So now we'll go back to our home component TS file.", 'start': 2034.721, 'duration': 3.663}, {'end': 2042.947, 'text': "We can see this is now breaking, and we're going to make a few changes.", 'start': 2038.824, 'duration': 4.123}, {'end': 2053.955, 'text': "So we're going to store let's delete that the returned data as an object and we're going to call it users and it's just going to be an object here.", 'start': 2043.387, 'duration': 10.568}, {'end': 2057.237, 'text': 'This first click thing we can now get rid of.', 'start': 2055.356, 'duration': 1.881}, {'end': 2062.158, 'text': "And ngOnInit, so we haven't really discussed what this is.", 'start': 2057.257, 'duration': 4.901}, {'end': 2065.438, 'text': 'This is an Angular lifecycle hook.', 'start': 2062.217, 'duration': 3.221}, {'end': 2070.521, 'text': 'So basically whatever happens here will get executed when this component loads up.', 'start': 2065.478, 'duration': 5.043}, {'end': 2073.982, 'text': "So that's what we would want to do by default when we visit the homepage.", 'start': 2071.061, 'duration': 2.921}, {'end': 2076.483, 'text': 'We want all the users to show up automatically.', 'start': 2074.022, 'duration': 2.461}, {'end': 2078.944, 'text': 'All right, so what we do is this.data.', 'start': 2077.063, 'duration': 1.881}, {'end': 2083.458, 'text': 'And then we use our get users method that we just created.', 'start': 2080.779, 'duration': 2.679}, {'end': 2086.199, 'text': "And then we're going to subscribe to the results.", 'start': 2083.478, 'duration': 2.721}, {'end': 2087.76, 'text': "So we'll say the data.", 'start': 2086.26, 'duration': 1.5}, {'end': 2096.702, 'text': "And then once we have the data, we're going to bind this dot users, which is the object that we defined above to the data.", 'start': 2089.701, 'duration': 7.001}, {'end': 2098.362, 'text': 'All right.', 'start': 2096.722, 'duration': 1.64}, {'end': 2108.784, 'text': "And also just real quickly, let's console log this dot data or this dot users rather, or you could do it with data as well.", 'start': 2098.902, 'duration': 9.882}, {'end': 2109.504, 'text': "It doesn't really matter.", 'start': 2108.804, 'duration': 0.7}, {'end': 2112.137, 'text': "All right, so let's go ahead back.", 'start': 2110.273, 'duration': 1.864}, {'end': 2119.887, 'text': "And now you can see automatically, we're getting that object that's returned from that endpoint.", 'start': 2113.761, 'duration': 6.126}, {'end': 2128.573, 'text': "All right, we can see there's data here and we have a first name, last name, an avatar, all that good stuff, also pagination and all that.", 'start': 2120.487, 'duration': 8.086}, {'end': 2135.618, 'text': "All right, so now let's make this so that we can actually display this right here in our template.", 'start': 2129.294, 'duration': 6.324}], 'summary': 'Using angular, accessing a fake api service, binding and displaying data in a component.', 'duration': 128.92, 'max_score': 2006.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2006698.jpg'}, {'end': 2070.521, 'src': 'embed', 'start': 2043.387, 'weight': 4, 'content': [{'end': 2053.955, 'text': "So we're going to store let's delete that the returned data as an object and we're going to call it users and it's just going to be an object here.", 'start': 2043.387, 'duration': 10.568}, {'end': 2057.237, 'text': 'This first click thing we can now get rid of.', 'start': 2055.356, 'duration': 1.881}, {'end': 2062.158, 'text': "And ngOnInit, so we haven't really discussed what this is.", 'start': 2057.257, 'duration': 4.901}, {'end': 2065.438, 'text': 'This is an Angular lifecycle hook.', 'start': 2062.217, 'duration': 3.221}, {'end': 2070.521, 'text': 'So basically whatever happens here will get executed when this component loads up.', 'start': 2065.478, 'duration': 5.043}], 'summary': "Storing returned data as 'users' object in angular lifecycle hook ngoninit.", 'duration': 27.134, 'max_score': 2043.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2043387.jpg'}], 'start': 1707.97, 'title': 'Angular 7 services and http client', 'summary': 'Covers creating and utilizing services in angular 7 for efficient code accessibility across components and using http client module to communicate with a fake api service, retrieve and display data, and utilizing angular directives and lifecycle hooks.', 'chapters': [{'end': 1906.65, 'start': 1707.97, 'title': 'Angular 7 services overview', 'summary': 'Explains how to create and utilize services in angular 7 to define code accessible across multiple components, demonstrating the process of generating a service file and accessing methods via dependency injection, enabling efficient communication with a backend or rest api.', 'duration': 198.68, 'highlights': ['Services in Angular 7 allow you to define code that needs to be accessible across multiple components in a central location, essentially. Explains the purpose of services in Angular 7, emphasizing the centralization of code for multi-component accessibility.', "The process of generating a service file involves using the 'ng generate s' command followed by the service name, creating a typical component-like structure with an injectable decorator. Describes the step-by-step process of generating a service file, highlighting the command and resulting file structure.", "Demonstrates the utilization of dependency injection to access methods from the data service in different components, showcasing the creation of an instance in the constructor and referencing methods via 'this.data'. Illustrates the usage of dependency injection for accessing service methods in different components, emphasizing the practical implementation through constructor and method referencing."]}, {'end': 2225.194, 'start': 1907.49, 'title': 'Angular http client and data display', 'summary': "Demonstrates how to use angular's http client module to communicate with a fake api service, retrieve data, and display it in the home template, while also explaining the usage of ngoninit lifecycle hook and ngif and ngfor directives in angular templates.", 'duration': 317.704, 'highlights': ["Usage of Angular's HTTP client module The tutorial explains how to import and use Angular's HTTP client module to communicate with a fake API service, fetch data, and display it in the home template.", 'Explanation of ngOnInit lifecycle hook The chapter provides an explanation of the ngOnInit lifecycle hook in Angular, detailing its purpose as an Angular lifecycle hook that gets executed when a component loads up.', 'Demonstration of ngIf and ngFor directives The tutorial demonstrates the usage of ngIf and ngFor directives in an Angular template to conditionally display elements and iterate over an array of objects.']}], 'duration': 517.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA1707970.jpg', 'highlights': ['Services in Angular 7 centralize code for multi-component accessibility.', "Generating a service file involves using the 'ng generate s' command.", 'Dependency injection allows accessing service methods in different components.', "Using Angular's HTTP client module to communicate with a fake API service.", 'Explanation of the ngOnInit lifecycle hook in Angular.', 'Demonstration of ngIf and ngFor directives in an Angular template.']}, {'end': 2472.681, 'segs': [{'end': 2249.752, 'src': 'embed', 'start': 2225.834, 'weight': 4, 'content': [{'end': 2232.059, 'text': "And if we're lucky at all, we'll go ahead and let's see, go here.", 'start': 2225.834, 'duration': 6.225}, {'end': 2233.219, 'text': 'There we go.', 'start': 2232.779, 'duration': 0.44}, {'end': 2235.061, 'text': 'And now that looks really bad.', 'start': 2233.239, 'duration': 1.822}, {'end': 2236.802, 'text': "So let's go ahead and style this up.", 'start': 2235.141, 'duration': 1.661}, {'end': 2237.982, 'text': 'All right.', 'start': 2237.742, 'duration': 0.24}, {'end': 2242.486, 'text': "so we're going to go into our home component, CSS or the SAS file.", 'start': 2237.982, 'duration': 4.504}, {'end': 2246.409, 'text': "get rid of these two rule sets and I'm going to paste this from the written version of the tutorial.", 'start': 2242.486, 'duration': 3.923}, {'end': 2248.311, 'text': 'Nothing crazy happening here.', 'start': 2246.93, 'duration': 1.381}, {'end': 2249.752, 'text': "It's just going to make it look a lot better.", 'start': 2248.331, 'duration': 1.421}], 'summary': 'Improving the visual style of the home component by pasting from the written tutorial.', 'duration': 23.918, 'max_score': 2225.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2225834.jpg'}, {'end': 2257.976, 'src': 'heatmap', 'start': 2225.834, 'weight': 0.782, 'content': [{'end': 2232.059, 'text': "And if we're lucky at all, we'll go ahead and let's see, go here.", 'start': 2225.834, 'duration': 6.225}, {'end': 2233.219, 'text': 'There we go.', 'start': 2232.779, 'duration': 0.44}, {'end': 2235.061, 'text': 'And now that looks really bad.', 'start': 2233.239, 'duration': 1.822}, {'end': 2236.802, 'text': "So let's go ahead and style this up.", 'start': 2235.141, 'duration': 1.661}, {'end': 2237.982, 'text': 'All right.', 'start': 2237.742, 'duration': 0.24}, {'end': 2242.486, 'text': "so we're going to go into our home component, CSS or the SAS file.", 'start': 2237.982, 'duration': 4.504}, {'end': 2246.409, 'text': "get rid of these two rule sets and I'm going to paste this from the written version of the tutorial.", 'start': 2242.486, 'duration': 3.923}, {'end': 2248.311, 'text': 'Nothing crazy happening here.', 'start': 2246.93, 'duration': 1.381}, {'end': 2249.752, 'text': "It's just going to make it look a lot better.", 'start': 2248.331, 'duration': 1.421}, {'end': 2252.054, 'text': 'And there we go.', 'start': 2249.772, 'duration': 2.282}, {'end': 2253.335, 'text': 'Awesome, awesome stuff.', 'start': 2252.074, 'duration': 1.261}, {'end': 2257.976, 'text': "All right, so now let's talk about Angular 7 forms.", 'start': 2253.973, 'duration': 4.003}], 'summary': 'Styling improvement made to home component for better appearance.', 'duration': 32.142, 'max_score': 2225.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2225834.jpg'}, {'end': 2326.338, 'src': 'embed', 'start': 2296.024, 'weight': 2, 'content': [{'end': 2300.146, 'text': 'So when it comes to Angular, you have two approaches when it comes to creating forms.', 'start': 2296.024, 'duration': 4.122}, {'end': 2306.43, 'text': "You have the template-based approach or you have reactive forms as it's called.", 'start': 2300.186, 'duration': 6.244}, {'end': 2310.311, 'text': "Alright, so I'm not going to go into the differences too much between these two approaches,", 'start': 2307.01, 'duration': 3.301}, {'end': 2312.772, 'text': 'but reactive forms generally provides you with more control.', 'start': 2310.311, 'duration': 2.461}, {'end': 2321.056, 'text': 'And I form validation could be unit tested with reactive forms, whereas they cannot be with the template driven forms.', 'start': 2313.493, 'duration': 7.563}, {'end': 2326.338, 'text': "So to get started with reactive forms, we're going to visit our app module TS file once again.", 'start': 2321.436, 'duration': 4.902}], 'summary': 'Angular offers two form creation approaches: template-based and reactive forms. reactive forms provide more control and enable unit testing for form validation.', 'duration': 30.314, 'max_score': 2296.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2296024.jpg'}, {'end': 2378.224, 'src': 'embed', 'start': 2335.846, 'weight': 0, 'content': [{'end': 2342.473, 'text': "and then, of course, once again we'll take reactive forms module and we'll import it to or add it to our imports array.", 'start': 2335.846, 'duration': 6.627}, {'end': 2349.119, 'text': "right here, once again only has to be done once, and then we're going to visit our contact component.", 'start': 2342.473, 'duration': 6.646}, {'end': 2351.522, 'text': "so it's right here, All right.", 'start': 2349.119, 'duration': 2.403}, {'end': 2358.168, 'text': "so we're going to import three different functions from the Angular forms library.", 'start': 2351.522, 'duration': 6.646}, {'end': 2362.252, 'text': 'And that is the form builder, the form group, and validators.', 'start': 2358.949, 'duration': 3.303}, {'end': 2366.396, 'text': "So you'll see how these will all come into play as we start to add our code here.", 'start': 2362.793, 'duration': 3.603}, {'end': 2374.341, 'text': "So first, before we get to structuring the actual forms, we're going to put in three different properties.", 'start': 2367.037, 'duration': 7.304}, {'end': 2378.224, 'text': "So we're going to create a property called message form.", 'start': 2374.381, 'duration': 3.843}], 'summary': 'Import reactive forms module, define properties for message form.', 'duration': 42.378, 'max_score': 2335.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2335846.jpg'}], 'start': 2225.834, 'title': 'Angular 7 forms', 'summary': 'Discusses styling and creating forms in angular 7, focusing on form validation and data display. it also covers the differences between template-based and reactive forms, emphasizing the benefits of reactive forms. additionally, it delves into creating a message form using form builder and form group in angular, highlighting setting up form fields with validation rules and dependency injection of form builder.', 'chapters': [{'end': 2295.503, 'start': 2225.834, 'title': 'Styling and creating forms in angular 7', 'summary': 'Covers styling a component and creating a basic form in angular 7, with a focus on form validation and data display.', 'duration': 69.669, 'highlights': ['The tutorial demonstrates styling a component by updating the CSS/SASS file to improve the appearance, with the result of making it look a lot better.', 'The chapter also delves into creating a basic form in Angular 7 for a home page, about page, and contact us page, emphasizing form validation, data display, and the process of obtaining data from the forms.', 'The speaker mentions the intention to show how to work with forms, including validation and data display, with a suggestion to search on Google for the process of sending the form data via email.']}, {'end': 2358.168, 'start': 2296.024, 'title': 'Angular forms: template-based vs reactive forms', 'summary': 'Discusses the differences between template-based and reactive forms in angular, highlighting that reactive forms provide more control and the ability for form validation to be unit tested, while emphasizing the necessary steps to get started with reactive forms.', 'duration': 62.144, 'highlights': ['Reactive forms generally provide more control compared to template-driven forms.', 'Form validation can be unit tested with reactive forms, unlike with template-driven forms.', 'The necessary steps to start with reactive forms include importing the reactive forms module from the Angular forms library in the app module TS file and importing specific functions in the contact component.']}, {'end': 2472.681, 'start': 2358.949, 'title': 'Angular form builder and validators', 'summary': 'Covers creating a message form using form builder and form group in angular, including setting up form fields with validation rules and dependency injection of form builder, with a suggestion to refer to the official docs for more details.', 'duration': 113.732, 'highlights': ['The chapter covers creating a message form using form builder and form group in Angular, including setting up form fields with validation rules and dependency injection of form builder, with a suggestion to refer to the official docs for more details.', "The form group is utilized to create a 'message form' with form fields for name and message, each having validation rules such as 'required', and it is recommended to explore additional validation options in the official documentation.", "Dependency injection of the form builder function is demonstrated for creating the 'message form' in Angular, emphasizing its importance in the form creation process."]}], 'duration': 246.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2225834.jpg', 'highlights': ['The necessary steps to start with reactive forms include importing the reactive forms module from the Angular forms library in the app module TS file and importing specific functions in the contact component.', 'The chapter covers creating a message form using form builder and form group in Angular, including setting up form fields with validation rules and dependency injection of form builder, with a suggestion to refer to the official docs for more details.', 'Reactive forms generally provide more control compared to template-driven forms.', "The form group is utilized to create a 'message form' with form fields for name and message, each having validation rules such as 'required', and it is recommended to explore additional validation options in the official documentation.", 'The tutorial demonstrates styling a component by updating the CSS/SASS file to improve the appearance, with the result of making it look a lot better.']}, {'end': 3027.475, 'segs': [{'end': 2534.303, 'src': 'embed', 'start': 2473.522, 'weight': 0, 'content': [{'end': 2482.244, 'text': "And then finally, we're going to create a a method down here that's called when somebody submits the form and they click the submit button.", 'start': 2473.522, 'duration': 8.722}, {'end': 2488.648, 'text': "So on submit, we'll say this dot submitted equals true.", 'start': 2482.284, 'duration': 6.364}, {'end': 2491.25, 'text': "So let's create that up here real quickly.", 'start': 2489.189, 'duration': 2.061}, {'end': 2497.374, 'text': "So we're going to say submitted equals false.", 'start': 2491.37, 'duration': 6.004}, {'end': 2506.178, 'text': "And then we also have another one we're going to put success equals false as well.", 'start': 2499.332, 'duration': 6.846}, {'end': 2510.422, 'text': 'You could do that the TypeScript way too.', 'start': 2507.459, 'duration': 2.963}, {'end': 2516.987, 'text': 'And basically, this is going to help us determine if the form has been submitted.', 'start': 2511.643, 'duration': 5.344}, {'end': 2524.133, 'text': 'And success will mean if all of these values have been validated and they result true.', 'start': 2517.588, 'duration': 6.545}, {'end': 2534.303, 'text': "Then right here we're going to say if this.messageForm.invalid.", 'start': 2526.315, 'duration': 7.988}], 'summary': 'Creating a method to handle form submission and validation in typescript.', 'duration': 60.781, 'max_score': 2473.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2473522.jpg'}, {'end': 2625.355, 'src': 'embed', 'start': 2592.09, 'weight': 4, 'content': [{'end': 2593.791, 'text': "And then we'll put in a form.", 'start': 2592.09, 'duration': 1.701}, {'end': 2595.351, 'text': 'All right.', 'start': 2595.151, 'duration': 0.2}, {'end': 2597.291, 'text': "So the action, we don't even need an action.", 'start': 2595.371, 'duration': 1.92}, {'end': 2600.952, 'text': "We're going to put in here form group.", 'start': 2597.911, 'duration': 3.041}, {'end': 2610.09, 'text': 'So we take this particular form, we bind it to the name of the form group, which is message form that we defined in the component logic.', 'start': 2602.847, 'duration': 7.243}, {'end': 2616.712, 'text': "And then we're going to say through event binding, instead of click this time, it's going to be NG submit.", 'start': 2610.61, 'duration': 6.102}, {'end': 2625.355, 'text': "So on form submission, we're going to call the on submit method that we created simple enough.", 'start': 2617.752, 'duration': 7.603}], 'summary': "Creating a form group linked to 'message form' and using ng submit for form submission.", 'duration': 33.265, 'max_score': 2592.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2592090.jpg'}, {'end': 2712.779, 'src': 'embed', 'start': 2678.991, 'weight': 1, 'content': [{'end': 2679.311, 'text': 'All right.', 'start': 2678.991, 'duration': 0.32}, {'end': 2686.68, 'text': "And then we're going to have our form validation output right here in this section.", 'start': 2681.536, 'duration': 5.144}, {'end': 2689.702, 'text': 'You can use any type of HTML elements that you want.', 'start': 2686.7, 'duration': 3.002}, {'end': 2694.526, 'text': "I'm going to put div and ng-if equals submitted.", 'start': 2689.722, 'duration': 4.804}, {'end': 2707.275, 'text': 'So if submitted equals true, and then also message form.controls.name dot errors.', 'start': 2695.646, 'duration': 11.629}, {'end': 2711.658, 'text': 'So this will only show if it has been submitted and if there are errors.', 'start': 2707.495, 'duration': 4.163}, {'end': 2712.779, 'text': 'All right.', 'start': 2712.498, 'duration': 0.281}], 'summary': 'Form validation output using div and ng-if to show errors when submitted.', 'duration': 33.788, 'max_score': 2678.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2678991.jpg'}, {'end': 2923.2, 'src': 'embed', 'start': 2887.179, 'weight': 2, 'content': [{'end': 2889.4, 'text': 'Now one final thing I want to talk about is deployment.', 'start': 2887.179, 'duration': 2.221}, {'end': 2896.722, 'text': 'So what do you do exactly to get this deployed? Well, we first have to run a command, ng build.', 'start': 2889.82, 'duration': 6.902}, {'end': 2902.604, 'text': 'And this is just going to build everything and package it up into a dist folder, or short for distribution.', 'start': 2896.962, 'duration': 5.642}, {'end': 2908.748, 'text': "so now that it's done, we can see that there's a new dist folder right here.", 'start': 2903.564, 'duration': 5.184}, {'end': 2909.589, 'text': "so let's right click.", 'start': 2908.748, 'duration': 0.841}, {'end': 2914.713, 'text': "i'm going to reveal an explorer, all right, so i'll click on this.", 'start': 2909.589, 'duration': 5.124}, {'end': 2923.2, 'text': 'we have our ng7 folder and we can see now that we have our files, and these are a little bit large.', 'start': 2914.713, 'duration': 8.487}], 'summary': "Deployment involves running 'ng build' to package files into a 'dist' folder.", 'duration': 36.021, 'max_score': 2887.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2887179.jpg'}], 'start': 2473.522, 'title': 'Creating and deploying angular forms', 'summary': "Discusses creating a method for form submission, initializing variables like 'submitted' and 'success', and implementing form validation in typescript for determining form submission and success. it also covers the process of creating a form in angular, including form validation, submission handling, and deployment, emphasizing the usage of ng-submit and ng-if, and concludes with deployment instructions for reducing file sizes and hosting the app.", 'chapters': [{'end': 2556.559, 'start': 2473.522, 'title': 'Creating form submission method', 'summary': "Discusses creating a method for form submission, initializing variables like 'submitted' and 'success', and implementing form validation in typescript for determining form submission and success.", 'duration': 83.037, 'highlights': ["The chapter discusses creating a method for form submission, initializing variables like 'submitted' and 'success', and implementing form validation in TypeScript for determining form submission and success.", "The method sets 'submitted' to true when the form is submitted and initializes it as false by default.", "It also initializes 'success' as false and uses form validation to determine if the form values have been validated, setting 'success' to true if validation is successful."]}, {'end': 3027.475, 'start': 2556.559, 'title': 'Angular form creation and deployment', 'summary': 'Covers the process of creating a form in angular, including form validation, submission handling, and deployment, emphasizing the usage of ng-submit and ng-if, and concludes with deployment instructions for reducing file sizes and hosting the app.', 'duration': 470.916, 'highlights': ['The chapter covers the process of creating a form in Angular, including form validation, submission handling, and deployment, emphasizing the usage of ng-submit and ng-if.', "The deployment instructions include running 'ng build' to package files into a 'dist' folder, using 'ng build --prod' for production builds, and reducing file sizes for deployment.", 'The form handling involves binding form elements to the component logic, using event binding for form submission, and displaying validation errors based on form submission and specific validation failures.', 'The form includes input fields for name and message, with form control bindings and validation error handling for required fields, along with a submission button and display of form submission results.', 'The tutorial emphasizes the importance of persistence and practice with Angular, encourages feedback on preferred front-end frameworks, and promotes subscribing for future Angular-related content.']}], 'duration': 553.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5wtnKulcquA/pics/5wtnKulcquA2473522.jpg', 'highlights': ["The chapter discusses creating a method for form submission, initializing variables like 'submitted' and 'success', and implementing form validation in TypeScript for determining form submission and success.", 'The chapter covers the process of creating a form in Angular, including form validation, submission handling, and deployment, emphasizing the usage of ng-submit and ng-if.', "The deployment instructions include running 'ng build' to package files into a 'dist' folder, using 'ng build --prod' for production builds, and reducing file sizes for deployment.", "The method sets 'submitted' to true when the form is submitted and initializes it as false by default.", 'The form handling involves binding form elements to the component logic, using event binding for form submission, and displaying validation errors based on form submission and specific validation failures.']}], 'highlights': ['Learn angular 7 in 50 minutes crash course includes project demonstration, angular cli setup, css implementation, class and style binding, services and http client usage, form creation and deployment, emphasizing benefits of reactive forms and efficient code accessibility.', 'The Angular CLI installation with Node.js and NPM is highlighted as the preferable way to go, making the setup easy with minimal work involved.', "Setting up routing for different components in an Angular app, enabling successful navigation to 'home', 'about', and 'contact' components.", 'The ng-class directive is used to control multiple classes on an element, allowing for the setup of conditional CSS classes, such as displaying the gray class when H1 style is true and the large class when H1 style is not true.', 'Services in Angular 7 centralize code for multi-component accessibility.', 'The necessary steps to start with reactive forms include importing the reactive forms module from the Angular forms library in the app module TS file and importing specific functions in the contact component.', "The chapter covers creating a method for form submission, initializing variables like 'submitted' and 'success', and implementing form validation in TypeScript for determining form submission and success.", "The deployment instructions include running 'ng build' to package files into a 'dist' folder, using 'ng build --prod' for production builds, and reducing file sizes for deployment."]}