title
Learn Angular 8 from Scratch for Beginners - Crash Course

description
https://promo.linode.com/designcourse/ - Use code 'DESIGNC19' to get $20 credit on your new Linode account! https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, you're going to learn Angular 8 from scratch as a beginner. The written tutorial is linked below in this description. Angular 8 is out now, and for those who prefer to learn a framework with the current latest version, this tutorial is for you. You're going to learn... - Angular 8 Installation - Basic templating - Data binding - Style and Class binding - The Router - Fetching data from an API with the http client - Deployment ...and much more.. Written tutorial: https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course Let's get started! - - - - - - - - - - - - - - - - - - - - - - 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 8 from Scratch for Beginners - Crash Course', 'heatmap': [{'end': 1544.026, 'start': 1510.693, 'weight': 1}], 'summary': 'This crash course sponsored by linode introduces beginners to angular 8, covering core concepts like installation, data binding, routing, and fetching data from an api, along with folder structure, web template styling, angular cli usage, and service creation for app development, providing a comprehensive guide to angular development.', 'chapters': [{'end': 39.332, 'segs': [{'end': 39.332, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 3.257, 'text': "Today you're going to learn Angular 8 from scratch as a beginner.", 'start': 0.069, 'duration': 3.188}, {'end': 8.656, 'text': 'Before we begin, this video is sponsored by Linode.', 'start': 6.035, 'duration': 2.621}, {'end': 14.898, 'text': 'Now Linode supplies servers that let you deploy apps, sites, and services that are both flexible and scalable.', 'start': 8.896, 'duration': 6.002}, {'end': 20.241, 'text': "Linode's one-click apps make it easy to set up a web stack or a WordPress instance in under a minute.", 'start': 15.079, 'duration': 5.162}, {'end': 25.103, 'text': "Simple pricing starting at $5 per month ensures there's no hidden fees or surprise bills.", 'start': 20.341, 'duration': 4.762}, {'end': 31.345, 'text': 'So sign up with the link below and use this code right here to receive a free $20 credit on your Linode account.', 'start': 25.423, 'duration': 5.922}, {'end': 31.845, 'text': 'Hey, everyone.', 'start': 31.445, 'duration': 0.4}, {'end': 34.007, 'text': "What's up? Gary Simon, of course, Zetro.com.", 'start': 31.865, 'duration': 2.142}, {'end': 39.332, 'text': "And for those of you who followed me, you've known that every time that there's a new version of Angular that comes out,", 'start': 34.127, 'duration': 5.205}], 'summary': 'Learn angular 8 as a beginner, sponsored by linode with $20 credit offer.', 'duration': 39.263, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA69.jpg'}], 'start': 0.069, 'title': 'Learning angular 8 with linode sponsorship', 'summary': 'Introduces learning angular 8 as a beginner, sponsored by linode, a provider of servers for deploying apps, sites, and services. linode offers simple pricing starting at $5 per month and a free $20 credit on sign up.', 'chapters': [{'end': 39.332, 'start': 0.069, 'title': 'Learning angular 8 with linode sponsorship', 'summary': 'Introduces learning angular 8 as a beginner, sponsored by linode, which provides servers for deploying apps, sites, and services, with simple pricing starting at $5 per month and a free $20 credit on sign up.', 'duration': 39.263, 'highlights': ['The chapter introduces learning Angular 8 as a beginner, sponsored by Linode, which provides servers for deploying apps, sites, and services, with simple pricing starting at $5 per month and a free $20 credit on sign up.', 'Linode supplies servers that let you deploy apps, sites, and services that are both flexible and scalable, with simple pricing starting at $5 per month.', "Linode's one-click apps make it easy to set up a web stack or a WordPress instance in under a minute."]}], 'duration': 39.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA69.jpg', 'highlights': ['Linode supplies servers for deploying apps, sites, and services, with simple pricing starting at $5 per month and a free $20 credit on sign up.', "Linode's one-click apps make it easy to set up a web stack or a WordPress instance in under a minute.", 'The chapter introduces learning Angular 8 as a beginner, sponsored by Linode.']}, {'end': 653.786, 'segs': [{'end': 116.721, 'src': 'embed', 'start': 55.005, 'weight': 0, 'content': [{'end': 62.714, 'text': "So it's kind of like a real simple playground app where we learn a lot of the core concepts associated with Angular.", 'start': 55.005, 'duration': 7.709}, {'end': 69.023, 'text': 'So this includes learning how to install it, basic templating data binding style and class binding the router,', 'start': 63.034, 'duration': 5.989}, {'end': 74.671, 'text': 'fetching data from an API with the HTTP client deployment and, of course, much, much more.', 'start': 69.023, 'duration': 5.648}, {'end': 79.934, 'text': "all right, so there's a written version of this tutorial that you can also use to follow along.", 'start': 75.171, 'duration': 4.763}, {'end': 88.838, 'text': "it's linked in the description and also you should know html, css and basic javascript before trying to learn angular view, or, you know,", 'start': 79.934, 'duration': 8.904}, {'end': 90.399, 'text': 'react or anything like that.', 'start': 88.838, 'duration': 1.561}, {'end': 94.629, 'text': "all right, so, as always, make sure to subscribe and let's get started All right.", 'start': 90.399, 'duration': 4.23}, {'end': 97.511, 'text': "so let's talk about installation and getting everything installed.", 'start': 94.629, 'duration': 2.882}, {'end': 104.835, 'text': 'So up here, I have the Windows 10 terminal preview ready to rock in a code folder.', 'start': 97.571, 'duration': 7.264}, {'end': 111.878, 'text': "And first you're going to need Node.js first of all to install the Angular CLI or the command line interface,", 'start': 105.615, 'duration': 6.263}, {'end': 116.721, 'text': 'which allows you to install and get started in managing your Angular 8 projects.', 'start': 111.878, 'duration': 4.843}], 'summary': 'Learn core angular concepts, including installation, data binding, fetching api data, and more. requires knowledge of html, css, and basic javascript. subscribe for the written tutorial.', 'duration': 61.716, 'max_score': 55.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA55005.jpg'}, {'end': 316.378, 'src': 'embed', 'start': 288.151, 'weight': 6, 'content': [{'end': 290.394, 'text': 'If I can get this window over here, thank you.', 'start': 288.151, 'duration': 2.243}, {'end': 295.78, 'text': 'So this is the default, just the boilerplate app that they create.', 'start': 291.535, 'duration': 4.245}, {'end': 301.606, 'text': 'But yeah, running ng serve hyphen O, this gives you hot reloading.', 'start': 296.2, 'duration': 5.406}, {'end': 306.452, 'text': 'So every time you modify or update a file, this will reload automatically in your browser.', 'start': 301.646, 'duration': 4.806}, {'end': 311.157, 'text': 'So you can start working and debugging your project and all that good stuff.', 'start': 306.512, 'duration': 4.645}, {'end': 315.398, 'text': "So we're going to minimize this for now, and we're also going to get out of here.", 'start': 311.857, 'duration': 3.541}, {'end': 316.378, 'text': "We're just going to minimize that.", 'start': 315.418, 'duration': 0.96}], 'summary': "Running 'ng serve -o' enables hot reloading for faster development and debugging.", 'duration': 28.227, 'max_score': 288.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA288151.jpg'}, {'end': 353.288, 'src': 'embed', 'start': 327.682, 'weight': 2, 'content': [{'end': 334.243, 'text': "It's worth dedicating a little bit of time to outline the important files and the folders that you're going to be commonly working in,", 'start': 327.682, 'duration': 6.561}, {'end': 338.164, 'text': 'and also understand some of the under the hood stuff that makes Angular 8 work.', 'start': 334.243, 'duration': 3.921}, {'end': 339.325, 'text': 'So the folder..', 'start': 338.385, 'duration': 0.94}, {'end': 344.926, 'text': "In file structure, let's go over just some of these basic ones.", 'start': 340.325, 'duration': 4.601}, {'end': 348.247, 'text': 'So E2E, this is end-to-end testing.', 'start': 344.946, 'duration': 3.301}, {'end': 353.288, 'text': "We're not going to be covering testing in this course, so you don't have to worry about that.", 'start': 348.687, 'duration': 4.601}], 'summary': 'Understand key folders and files in angular 8, including e2e for end-to-end testing.', 'duration': 25.606, 'max_score': 327.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA327682.jpg'}, {'end': 447.001, 'src': 'embed', 'start': 422.595, 'weight': 1, 'content': [{'end': 430.497, 'text': 'All right, so think of components as the building blocks of your Angular app, and it consists of basically three elements.', 'start': 422.595, 'duration': 7.902}, {'end': 434.938, 'text': "So I'm going to open up app app component.ts.", 'start': 430.977, 'duration': 3.961}, {'end': 437.338, 'text': 'this is the main heart of your component.', 'start': 434.938, 'duration': 2.4}, {'end': 439.179, 'text': "you can see there's several files here.", 'start': 437.338, 'duration': 1.841}, {'end': 441.399, 'text': 'that says app component.ts.', 'start': 439.179, 'duration': 2.22}, {'end': 443.22, 'text': 'this is spec.ts.', 'start': 441.399, 'duration': 1.821}, {'end': 444.78, 'text': 'this is for testing.', 'start': 443.22, 'duration': 1.56}, {'end': 447.001, 'text': "we're not going to be touching that at all.", 'start': 444.78, 'duration': 2.221}], 'summary': 'Components in angular app consist of three main elements.', 'duration': 24.406, 'max_score': 422.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA422595.jpg'}, {'end': 519.938, 'src': 'embed', 'start': 490.711, 'weight': 5, 'content': [{'end': 499.239, 'text': 'And then the third and one of the most important sections is that the logic, the component logic resides right in this area right here.', 'start': 490.711, 'duration': 8.528}, {'end': 504.184, 'text': 'So, basically,', 'start': 500.54, 'duration': 3.644}, {'end': 515.174, 'text': "we're gonna be working with these three elements to build out a very simple kind of demonstration app so that I can demonstrate the most important building blocks going forward.", 'start': 504.184, 'duration': 10.99}, {'end': 519.938, 'text': "So let's start off by creating like a nav bar.", 'start': 515.775, 'duration': 4.163}], 'summary': 'The logic for building a demonstration app with three elements, starting with a nav bar.', 'duration': 29.227, 'max_score': 490.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA490711.jpg'}], 'start': 39.332, 'title': 'Angular crash course and folder structure', 'summary': 'Provides a crash course in angular for beginners, covering core concepts like installation, basic templating, data binding, style and class binding, routing, fetching data from an api, and deployment. additionally, it covers the folder structure of an angular 8 project, outlining important files and folders, and highlights the fundamental elements of an angular app, such as components and their key sections.', 'chapters': [{'end': 311.157, 'start': 39.332, 'title': 'Angular crash course for beginners', 'summary': 'Provides a crash course in angular for beginners, covering core concepts like installation, basic templating, data binding, style and class binding, routing, fetching data from an api, and deployment, emphasizing the need for prior knowledge in html, css, and basic javascript.', 'duration': 271.825, 'highlights': ['The chapter covers core concepts associated with Angular, such as installation, basic templating, data binding, style and class binding, routing, fetching data from an API with the HTTP client, and deployment. The tutorial covers core Angular concepts, including installation, basic templating, data binding, style and class binding, routing, fetching data from an API with the HTTP client, and deployment.', 'Prior knowledge in HTML, CSS, and basic JavaScript is emphasized as a prerequisite for learning Angular. The tutorial emphasizes the need for prior knowledge in HTML, CSS, and basic JavaScript before attempting to learn Angular.', 'The tutorial demonstrates the process of installing Node.js and the Angular CLI for managing Angular 8 projects. The tutorial explains the process of installing Node.js and the Angular CLI for managing Angular 8 projects.', "The chapter emphasizes the importance of running 'ng serve -o' for hot reloading and automatic browser reloading during development. The importance of running 'ng serve -o' for hot reloading and automatic browser reloading during development is emphasized in the tutorial."]}, {'end': 653.786, 'start': 311.857, 'title': 'Angular 8: folder structure and components', 'summary': 'Covers the folder structure of an angular 8 project, outlining important files and folders, and highlights the fundamental elements of an angular app, such as components and their key sections, including imports, component decorator, and logic.', 'duration': 341.929, 'highlights': ['Components are the building blocks of an Angular app, consisting of three main elements: the main heart of the component, the component decorator, and the component logic. Components are essential as they form the building blocks of an Angular app, comprising the main heart of the component, the component decorator for various properties, and the component logic, which are crucial sections in developing a demonstration app.', 'The folder structure of an Angular 8 project includes E2E for end-to-end testing, node modules for dependencies, source for code, app for Angular 8 code, index.html as the entry point, and styles.scss for global styles. The folder structure of an Angular 8 project encompasses E2E for end-to-end testing, node modules for dependencies, source for code, app for Angular 8 code, index.html as the entry point, and styles.scss for global styles, with a minimal focus on testing and node modules.', 'Creating a simple demonstration app involves working with three main elements of a component: the imports, the component decorator, and the component logic. Developing a simple demonstration app involves working with the three main elements of a component: the imports, the component decorator for various properties, and the component logic, which are essential in building out a demonstration app.']}], 'duration': 614.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA39332.jpg', 'highlights': ['The tutorial covers core Angular concepts, including installation, basic templating, data binding, style and class binding, routing, fetching data from an API with the HTTP client, and deployment.', 'Components are essential as they form the building blocks of an Angular app, comprising the main heart of the component, the component decorator for various properties, and the component logic, which are crucial sections in developing a demonstration app.', 'The folder structure of an Angular 8 project encompasses E2E for end-to-end testing, node modules for dependencies, source for code, app for Angular 8 code, index.html as the entry point, and styles.scss for global styles, with a minimal focus on testing and node modules.', 'The tutorial emphasizes the need for prior knowledge in HTML, CSS, and basic JavaScript before attempting to learn Angular.', 'The tutorial explains the process of installing Node.js and the Angular CLI for managing Angular 8 projects.', 'Developing a simple demonstration app involves working with the three main elements of a component: the imports, the component decorator for various properties, and the component logic, which are essential in building out a demonstration app.', "The importance of running 'ng serve -o' for hot reloading and automatic browser reloading during development is emphasized in the tutorial."]}, {'end': 1297.55, 'segs': [{'end': 700.68, 'src': 'embed', 'start': 673.4, 'weight': 5, 'content': [{'end': 681.225, 'text': "So we're going to go ahead and focus on fixing that by working within the global style sheet, which is styles.", 'start': 673.4, 'duration': 7.825}, {'end': 685.148, 'text': 'dot, scss or ss all right.', 'start': 682.245, 'duration': 2.903}, {'end': 687.59, 'text': "so first of all, i'm going to be pasting just some of these.", 'start': 685.148, 'duration': 2.442}, {'end': 693.474, 'text': 'you can get the full code and the written version of this tutorial, by the way, which is linked in the youtube description.', 'start': 687.59, 'duration': 5.884}, {'end': 700.68, 'text': "we're going to import nunito, which is the font i've been using lately i know i'm not using monster at much anymore,", 'start': 693.474, 'duration': 7.206}], 'summary': 'Fixing global style sheet by importing nunito font.', 'duration': 27.28, 'max_score': 673.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA673400.jpg'}, {'end': 881.876, 'src': 'embed', 'start': 857.635, 'weight': 0, 'content': [{'end': 863.688, 'text': "So we're going to use the Angular command line interface to generate a route here.", 'start': 857.635, 'duration': 6.053}, {'end': 868.29, 'text': "So, um, let's click plus CD, my app.", 'start': 864.249, 'duration': 4.041}, {'end': 870.271, 'text': 'So we have a second window up here.', 'start': 868.53, 'duration': 1.741}, {'end': 871.972, 'text': 'The other one NG serve is still running.', 'start': 870.371, 'duration': 1.601}, {'end': 878.935, 'text': "And so then we're just going to type NG generate, or you could just put in G for shorthand.", 'start': 872.812, 'duration': 6.123}, {'end': 880.696, 'text': 'We want to generate a component.', 'start': 879.295, 'duration': 1.401}, {'end': 881.876, 'text': 'No Yeah.', 'start': 881.116, 'duration': 0.76}], 'summary': 'Using angular cli to generate a route and component.', 'duration': 24.241, 'max_score': 857.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA857635.jpg'}, {'end': 933.019, 'src': 'embed', 'start': 902.82, 'weight': 1, 'content': [{'end': 912.865, 'text': 'And what it does is it creates four files, the template, the test, the TypeScript, which is the main component logic area, and also the SAS file.', 'start': 902.82, 'duration': 10.045}, {'end': 924.51, 'text': 'It also updates our app.module.ts file as well to add in this, the component and get it ready within the app and make it accessible.', 'start': 913.385, 'duration': 11.125}, {'end': 928.815, 'text': "So now we're going to visit the app routing file.", 'start': 925.07, 'duration': 3.745}, {'end': 933.019, 'text': "So let's get our control B sidebar open right here.", 'start': 928.935, 'duration': 4.084}], 'summary': 'The process creates four files and updates app.module.ts to add the component, making it accessible.', 'duration': 30.199, 'max_score': 902.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA902820.jpg'}, {'end': 1090.388, 'src': 'embed', 'start': 1062.852, 'weight': 2, 'content': [{'end': 1075.08, 'text': "So now let's start talking about communicating data to and from and from and to the component template in the component file itself.", 'start': 1062.852, 'duration': 12.228}, {'end': 1078.663, 'text': "So let's go ahead and open up home here.", 'start': 1075.661, 'duration': 3.002}, {'end': 1083.186, 'text': "And we're going to stick right here within the home component HTML.", 'start': 1079.423, 'duration': 3.763}, {'end': 1090.388, 'text': "let's get rid of that and we're going to have an h1 that says welcome,", 'start': 1083.866, 'duration': 6.522}], 'summary': 'Discussing data communication in component template, modifying home component html.', 'duration': 27.536, 'max_score': 1062.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1062852.jpg'}, {'end': 1184.058, 'src': 'embed', 'start': 1148.782, 'weight': 3, 'content': [{'end': 1149.823, 'text': 'We want to click event.', 'start': 1148.782, 'duration': 1.041}, {'end': 1152.604, 'text': "There's a bunch of other events that you can do.", 'start': 1150.503, 'duration': 2.101}, {'end': 1157.046, 'text': 'You just type in angular event binding types or something like that.', 'start': 1152.624, 'duration': 4.422}, {'end': 1160.688, 'text': "You'll get a full list like hover and all that stuff or mouse out and all that.", 'start': 1157.066, 'duration': 3.622}, {'end': 1168.692, 'text': "And then we're binding it to a method that doesn't yet exist, but we're going to create that in a bit.", 'start': 1161.208, 'duration': 7.484}, {'end': 1173.695, 'text': "And so it's saying just call this method when this element here is clicked.", 'start': 1169.353, 'duration': 4.342}, {'end': 1184.058, 'text': "And then this right here is simply how you display a property or a variable that's been defined from the component itself.", 'start': 1174.535, 'duration': 9.523}], 'summary': 'Demonstrating event binding in angular, creating methods for handling events, and displaying defined component properties.', 'duration': 35.276, 'max_score': 1148.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1148782.jpg'}, {'end': 1245.278, 'src': 'embed', 'start': 1216.841, 'weight': 4, 'content': [{'end': 1221.404, 'text': "So this is TypeScript, and it's a little bit different than defining JavaScript.", 'start': 1216.841, 'duration': 4.563}, {'end': 1227.188, 'text': "You don't have to use TypeScript, by the way, so it's purely optional, but it's a good idea to use it.", 'start': 1221.504, 'duration': 5.684}, {'end': 1236.814, 'text': "Just down here, we're going to say countClick, which is the name of the method that we referenced, and we're going to say this.clickCounter.", 'start': 1227.968, 'duration': 8.846}, {'end': 1239.855, 'text': 'plus equals one.', 'start': 1238.054, 'duration': 1.801}, {'end': 1245.278, 'text': "So it's just gonna add one to the number up here each time this is called.", 'start': 1240.235, 'duration': 5.043}], 'summary': 'Typescript offers optional but beneficial method for adding one to clickcounter.', 'duration': 28.437, 'max_score': 1216.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1216841.jpg'}], 'start': 654.046, 'title': 'Web template styling and angular cli', 'summary': 'Covers implementing global styles for a web template, including fonts, color variables, and styling elements, while also demonstrating angular cli usage for generating components, routes, and event binding for updating click counter property.', 'chapters': [{'end': 857.194, 'start': 654.046, 'title': 'Implementing global styles for web template', 'summary': 'Discusses the implementation of global styles for a web template, including importing fonts, defining color variables, styling container, header, and navigation elements, and preparing for future page elements. additionally, it briefly mentions the upcoming topic of routing.', 'duration': 203.148, 'highlights': ["The chapter discusses the implementation of global styles for a web template, including importing fonts, defining color variables, styling container, header, and navigation elements, and preparing for future page elements. It covers importing the font 'nunito', defining a primary color variable, setting styles for the body, container, header, links, and navigation elements, and preparing for future page elements.", 'It briefly mentions the upcoming topic of routing. The speaker briefly mentions the future discussion on how to make the actual pages work when clicked, indicating the upcoming topic of routing.']}, {'end': 1090.388, 'start': 857.635, 'title': 'Angular cli route generation', 'summary': 'Demonstrates using angular cli to generate components and routes, updating app.module.ts, and app-routing file to add components, and communicating data within the component template.', 'duration': 232.753, 'highlights': ['Using Angular CLI to generate components and routes The transcript demonstrates using Angular CLI to generate components and routes, with an example of generating two components and explaining the files created.', 'Updating app.module.ts and app-routing file to add components The chapter explains updating the app.module.ts and app-routing file to add components, import them, and define routes for the components.', 'Communicating data within the component template The chapter discusses communicating data within the component template, demonstrating modifying the home component HTML to display a welcome message.']}, {'end': 1297.55, 'start': 1090.388, 'title': 'Angular event binding', 'summary': 'Explains how to use event binding in angular to create a click event that updates a click counter property, and also demonstrates how to use typescript and sass files for styling.', 'duration': 207.162, 'highlights': ['Event binding in Angular for creating a click event and updating a click counter property The chapter demonstrates how to use event binding in Angular to create a click event and update a click counter property, which is a number that increases by one each time the method is called.', 'Explanation of TypeScript and its usage in defining properties and methods The chapter explains the usage of TypeScript for defining properties and methods, where TypeScript is used to define the click counter property and the method countClick.', 'Styling with Sass files and preventing text highlighting using user select property The transcript demonstrates the use of Sass files for styling, including setting font weight to bold and background to light gray. It also highlights the use of user select property to prevent text highlighting within the span element.']}], 'duration': 643.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA654046.jpg', 'highlights': ['Demonstrates using Angular CLI to generate components and routes.', 'Explains updating the app.module.ts and app-routing file to add components and define routes.', 'Discusses communicating data within the component template.', 'Shows how to use event binding in Angular to create a click event and update a click counter property.', 'Explains the usage of TypeScript for defining properties and methods.', 'Demonstrates the use of Sass files for styling and preventing text highlighting using user select property.']}, {'end': 1686.584, 'segs': [{'end': 1367.009, 'src': 'embed', 'start': 1341.496, 'weight': 1, 'content': [{'end': 1349.086, 'text': 'call this method that we defined in the component logic and then it updates it and then spits it back out right here to the template.', 'start': 1341.496, 'duration': 7.59}, {'end': 1350.709, 'text': "And as you can see, it's instant.", 'start': 1349.247, 'duration': 1.462}, {'end': 1353.643, 'text': "All right, so let's talk about two-way data binding.", 'start': 1351.462, 'duration': 2.181}, {'end': 1360.186, 'text': 'So the best way to demonstrate the concept of two-way data binding is to do it with a form element, usually an input.', 'start': 1353.723, 'duration': 6.463}, {'end': 1367.009, 'text': "So let's revisit our home component file once again, and we're gonna have a div class of container.", 'start': 1360.606, 'duration': 6.403}], 'summary': 'Demonstrating two-way data binding with instant updates.', 'duration': 25.513, 'max_score': 1341.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1341496.jpg'}, {'end': 1450.31, 'src': 'embed', 'start': 1417.984, 'weight': 0, 'content': [{'end': 1429.934, 'text': "all right, so what's happening here is i, this ng model is going to allow for what's called two-way data binding, where i, this input property,", 'start': 1417.984, 'duration': 11.95}, {'end': 1438.741, 'text': 'is going to both receive and also send information from into the component logic in homecomponent.ts,', 'start': 1429.934, 'duration': 8.807}, {'end': 1446.387, 'text': 'and we kind of demonstrate the the proof of it working by showing the name property.', 'start': 1440.062, 'duration': 6.325}, {'end': 1449.569, 'text': "all right, so you'll see how this works here.", 'start': 1446.387, 'duration': 3.182}, {'end': 1450.31, 'text': 'just a second.', 'start': 1449.569, 'duration': 0.741}], 'summary': 'Ng model enables two-way data binding for input property in homecomponent.ts.', 'duration': 32.326, 'max_score': 1417.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1417984.jpg'}, {'end': 1544.026, 'src': 'heatmap', 'start': 1510.693, 'weight': 1, 'content': [{'end': 1513.294, 'text': "All right, so let's save this and now it should work.", 'start': 1510.693, 'duration': 2.601}, {'end': 1518.156, 'text': 'So right here, there we go.', 'start': 1514.615, 'duration': 3.541}, {'end': 1523.037, 'text': 'All right.', 'start': 1522.796, 'duration': 0.241}, {'end': 1527.727, 'text': 'So if we were to update this code and say, Hey, save it.', 'start': 1523.077, 'duration': 4.65}, {'end': 1530.873, 'text': "It's going to show it here as well.", 'start': 1528.849, 'duration': 2.024}, {'end': 1531.555, 'text': 'And here.', 'start': 1531.154, 'duration': 0.401}, {'end': 1534.543, 'text': 'All right, very, very cool.', 'start': 1533.223, 'duration': 1.32}, {'end': 1537.544, 'text': "So now let's talk about ng-template.", 'start': 1534.603, 'duration': 2.941}, {'end': 1544.026, 'text': 'So this will allow us to work with if and else based on templates as well.', 'start': 1539.064, 'duration': 4.962}], 'summary': 'Demonstrating code update and ng-template for conditional templates.', 'duration': 33.333, 'max_score': 1510.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1510693.jpg'}, {'end': 1604.055, 'src': 'embed', 'start': 1569.283, 'weight': 2, 'content': [{'end': 1571.787, 'text': 'Of course, this is specific to Angular 8.', 'start': 1569.283, 'duration': 2.504}, {'end': 1574.411, 'text': "And we're going to wrap this in brackets.", 'start': 1571.787, 'duration': 2.624}, {'end': 1576.293, 'text': "And we're going to say ngIf.", 'start': 1574.811, 'duration': 1.482}, {'end': 1583.462, 'text': 'equals, and this is where we put in a template expression of some sort like a boolean value.', 'start': 1578.118, 'duration': 5.344}, {'end': 1586.684, 'text': "that's perhaps defined in the app component or the.", 'start': 1583.462, 'duration': 3.222}, {'end': 1593.849, 'text': 'the home component file or you can do click counter is greater than four.', 'start': 1586.684, 'duration': 7.165}, {'end': 1604.055, 'text': "so i, if it is, or if it's not, we can say ng, if else None.", 'start': 1593.849, 'duration': 10.206}], 'summary': 'Using ngif in angular 8 to conditionally display content based on a template expression, such as a boolean value or a click counter greater than four.', 'duration': 34.772, 'max_score': 1569.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1569283.jpg'}], 'start': 1297.55, 'title': 'Angular data binding', 'summary': 'Explores one-way and two-way data binding in angular, demonstrating data binding through event binding, click events, and two-way data binding with form elements. it also explains the concept of two-way data binding using ngmodel and demonstrates its implementation in homecomponent.ts, emphasizing the necessity of importing the formsmodule. additionally, it explains the use of ng-template and ngif in angular 8, demonstrating how to conditionally render content based on template expressions and providing a specific use case.', 'chapters': [{'end': 1388.033, 'start': 1297.55, 'title': 'Angular data binding', 'summary': 'Explores one-way and two-way data binding in angular, demonstrating data binding through event binding, click events, and two-way data binding with form elements.', 'duration': 90.483, 'highlights': ['The chapter explores two-way data binding, demonstrating the concept with a form element, usually an input.', 'It demonstrates event binding and click event binding, showcasing how data is updated and reflected in the template instantly.', 'Styling elements with padding, border, margin, and input.', 'The importance of multiple classes or elements to frame various experiments.']}, {'end': 1503.451, 'start': 1388.154, 'title': 'Understanding two-way data binding in angular', 'summary': 'Explains the concept of two-way data binding in angular using ngmodel and demonstrates its implementation in homecomponent.ts, emphasizing the necessity of importing the formsmodule for it to work.', 'duration': 115.297, 'highlights': ['The ng model allows for two-way data binding, enabling the input property to both receive and send information from and into the component logic in homecomponent.ts. The ng model facilitates two-way data binding, allowing the input property to both receive and send information from and into the component logic in homecomponent.ts.', 'Importing the FormsModule from Angular forms and adding it in the imports array in the app.module.ts file is necessary for ng model to work for two-way data binding. Importing the FormsModule from Angular forms and adding it in the imports array in the app.module.ts file is essential for ng model to enable two-way data binding.', 'Defining the name property is crucial for the functionality of two-way data binding in the home component file. Defining the name property in the home component file is essential for the functionality of two-way data binding.']}, {'end': 1686.584, 'start': 1504.231, 'title': 'Angular 8 ng-template and ngif', 'summary': 'Explains the use of ng-template and ngif in angular 8, demonstrating how to conditionally render content based on template expressions and providing a specific use case with quantifiable data.', 'duration': 182.353, 'highlights': ['The ng-template allows conditionally rendering content based on template expressions, such as a boolean value or a defined expression like click counter > 4, which is a useful feature for serious Angular app development.', 'Demonstrates the practical use of ngIf and ng-template by showing a specific use case where a click counter is used to conditionally display content, providing a clear understanding of how to utilize these features in Angular 8.', 'Illustrates the functionality of ngIf and ng-template with a tangible example, displaying the conditional rendering of content based on a click counter value, which enhances the understanding of the practical application of these concepts.']}], 'duration': 389.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1297550.jpg', 'highlights': ['The ng model facilitates two-way data binding, allowing the input property to both receive and send information from and into the component logic in homecomponent.ts.', 'Demonstrates event binding and click event binding, showcasing how data is updated and reflected in the template instantly.', 'The ng-template allows conditionally rendering content based on template expressions, such as a boolean value or a defined expression like click counter > 4, which is a useful feature for serious Angular app development.']}, {'end': 2054.704, 'segs': [{'end': 1710.562, 'src': 'embed', 'start': 1686.584, 'weight': 0, 'content': [{'end': 1692.787, 'text': "so now that you understand how to use these templates and of course there's you can get a little bit more in depth and there's other things you can do.", 'start': 1686.584, 'duration': 6.203}, {'end': 1696.649, 'text': "but that's the most basic usage and of course i don't want to go too too far beyond that.", 'start': 1692.787, 'duration': 3.862}, {'end': 1699.912, 'text': "So now let's talk about style binding.", 'start': 1697.79, 'duration': 2.122}, {'end': 1704.677, 'text': 'So sometimes you want to modify the appearance of your UI based on events that occur in your Angular app.', 'start': 1699.992, 'duration': 4.685}, {'end': 1707.92, 'text': 'So this is where class and style binding come into play.', 'start': 1705.037, 'duration': 2.883}, {'end': 1710.562, 'text': "So we're first going to focus on style binding.", 'start': 1708.24, 'duration': 2.322}], 'summary': 'Learn to use templates and style binding in angular.', 'duration': 23.978, 'max_score': 1686.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1686584.jpg'}, {'end': 1753.282, 'src': 'embed', 'start': 1728.233, 'weight': 1, 'content': [{'end': 1735.695, 'text': "We're going to say style dot and then the name of the CSS property that we want to create the style binding on.", 'start': 1728.233, 'duration': 7.462}, {'end': 1737.076, 'text': "So we'll say background color.", 'start': 1735.815, 'duration': 1.261}, {'end': 1741.438, 'text': 'as that is a valid CSS property name.', 'start': 1738.477, 'duration': 2.961}, {'end': 1747.2, 'text': 'So then we bind this to an expression of some sort.', 'start': 1742.198, 'duration': 5.002}, {'end': 1749.321, 'text': "So we're just going to use the same one right here.", 'start': 1747.26, 'duration': 2.061}, {'end': 1753.282, 'text': 'So let me push this down a little bit.', 'start': 1751.321, 'duration': 1.961}], 'summary': "Creating a style binding for the css property 'background color'.", 'duration': 25.049, 'max_score': 1728.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1728233.jpg'}, {'end': 1834.686, 'src': 'embed', 'start': 1808.051, 'weight': 2, 'content': [{'end': 1817.743, 'text': 'So what about the times when, for instance, you want to add multiple or you want to change multiple CSS styles, not just one like this one?', 'start': 1808.051, 'duration': 9.692}, {'end': 1820.787, 'text': "Well, you can use what's called NG style.", 'start': 1818.324, 'duration': 2.463}, {'end': 1821.928, 'text': 'All right.', 'start': 1820.807, 'duration': 1.121}, {'end': 1823.029, 'text': 'NG style.', 'start': 1822.248, 'duration': 0.781}, {'end': 1830.885, 'text': "So we changed that there to NG style, and then we're going to completely change this up as well.", 'start': 1823.803, 'duration': 7.082}, {'end': 1833.485, 'text': "So in here, we're going to have brackets.", 'start': 1831.645, 'duration': 1.84}, {'end': 1834.686, 'text': 'All right.', 'start': 1834.365, 'duration': 0.321}], 'summary': 'Using ng style can change multiple css styles easily.', 'duration': 26.635, 'max_score': 1808.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1808051.jpg'}, {'end': 1995.309, 'src': 'embed', 'start': 1968.096, 'weight': 3, 'content': [{'end': 1975.84, 'text': 'The only thing that it works the same, but instead of just adjusting the specific CSS, uh styles in line,', 'start': 1968.096, 'duration': 7.744}, {'end': 1978.101, 'text': "we're doing just by adding and removing a class.", 'start': 1975.84, 'duration': 2.261}, {'end': 1979.461, 'text': 'All right.', 'start': 1979.181, 'duration': 0.28}, {'end': 1983.883, 'text': "So let's see about how we would do this with multiple classes.", 'start': 1979.481, 'duration': 4.402}, {'end': 1987.545, 'text': "And this time we're going to work within the actual component file to do this.", 'start': 1984.184, 'duration': 3.361}, {'end': 1992.508, 'text': 'So what we do is we change this here to ng class.', 'start': 1988.045, 'duration': 4.463}, {'end': 1995.309, 'text': 'Remember the other one was ng style.', 'start': 1993.448, 'duration': 1.861}], 'summary': 'Using ngclass instead of ngstyle to manipulate multiple classes in angular component files.', 'duration': 27.213, 'max_score': 1968.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1968096.jpg'}], 'start': 1686.584, 'title': 'Angular binding techniques', 'summary': 'Introduces style binding and discusses ng style, ng class, and multiple classes in angular, with an example of dynamically modifying ui elements based on events.', 'chapters': [{'end': 1808.031, 'start': 1686.584, 'title': 'Angular style binding', 'summary': 'Introduces style binding in angular, explaining how to dynamically modify the appearance of ui elements based on events in the angular app, with an example of changing the background color based on a conditional expression.', 'duration': 121.447, 'highlights': ['Introduction to style binding in Angular The chapter introduces the concept of style binding in Angular, providing a foundation for dynamically modifying UI appearance based on events in the Angular app.', 'Example of using style binding to change background color based on a conditional expression The chapter demonstrates using style binding to change the background color of an HTML element based on a conditional expression, where the click counter value is used to dynamically alter the background color.']}, {'end': 2054.704, 'start': 1808.051, 'title': 'Angular binding techniques', 'summary': 'Discusses using ng style for applying multiple css styles, ng class for adding and removing classes, and multiple classes within the actual component file, illustrating the use of expressions and methods in angular binding techniques.', 'duration': 246.653, 'highlights': ['The chapter explains using NG style to apply multiple CSS styles, demonstrating the use of expressions for background color and border properties, and showcasing the effect of the click counter on the styles.', 'It then outlines the usage of NG class for adding and removing classes based on an expression, with an example of creating an active class and modifying the component CSS file to incorporate the class rules.', 'Furthermore, it delves into employing ng class to reference a method for adding or removing classes, illustrating the use of expressions within the method to define the classes based on the click counter value.']}], 'duration': 368.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA1686584.jpg', 'highlights': ['The chapter introduces the concept of style binding in Angular, providing a foundation for dynamically modifying UI appearance based on events in the Angular app.', 'The chapter demonstrates using style binding to change the background color of an HTML element based on a conditional expression, where the click counter value is used to dynamically alter the background color.', 'The chapter explains using NG style to apply multiple CSS styles, demonstrating the use of expressions for background color and border properties, and showcasing the effect of the click counter on the styles.', 'It then outlines the usage of NG class for adding and removing classes based on an expression, with an example of creating an active class and modifying the component CSS file to incorporate the class rules.', 'Furthermore, it delves into employing ng class to reference a method for adding or removing classes, illustrating the use of expressions within the method to define the classes based on the click counter value.']}, {'end': 2884.432, 'segs': [{'end': 2108.81, 'src': 'embed', 'start': 2083.161, 'weight': 2, 'content': [{'end': 2090.166, 'text': 'So services basically are, think of them just like special components that are reasonable throughout your app.', 'start': 2083.161, 'duration': 7.005}, {'end': 2097.407, 'text': "So we're going to create a service for the purpose of communicating with an API to fetch some data and then display it on our list page.", 'start': 2090.686, 'duration': 6.721}, {'end': 2100.888, 'text': "So let's generate the service with our Angular CLI here.", 'start': 2097.787, 'duration': 3.101}, {'end': 2102.968, 'text': 'All right.', 'start': 2100.908, 'duration': 2.06}, {'end': 2108.81, 'text': "So we're going to type in ng, g for generate, s for service, or you can just write out service as well.", 'start': 2102.988, 'duration': 5.822}], 'summary': 'Creating a service to communicate with an api for fetching and displaying data.', 'duration': 25.649, 'max_score': 2083.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2083161.jpg'}, {'end': 2176.974, 'src': 'embed', 'start': 2148.414, 'weight': 5, 'content': [{'end': 2152.776, 'text': 'All your work is going to go here in the service logic in this section right here.', 'start': 2148.414, 'duration': 4.362}, {'end': 2160.081, 'text': "So just to demonstrate in a very simple manner, then we'll actually get the HTTP stuff working.", 'start': 2153.317, 'duration': 6.764}, {'end': 2165.884, 'text': "Just to demonstrate how this works, we're going to do something very stupidly simple.", 'start': 2160.901, 'duration': 4.983}, {'end': 2172.421, 'text': "So we're going to say, we're going to create my method here And we're going to return just a console log.", 'start': 2166.265, 'duration': 6.156}, {'end': 2176.974, 'text': 'Hey, what is up? All right.', 'start': 2173.606, 'duration': 3.368}], 'summary': 'Demonstrating service logic implementation with simple method returning console log message.', 'duration': 28.56, 'max_score': 2148.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2148414.jpg'}, {'end': 2325.962, 'src': 'embed', 'start': 2297.667, 'weight': 1, 'content': [{'end': 2303.511, 'text': "And in order to do that, we're going to have to work with the Angular HTTP client, which allows you to do just that.", 'start': 2297.667, 'duration': 5.844}, {'end': 2313.818, 'text': "So we're going to import HTTP client from Angular common HTTP.", 'start': 2303.611, 'duration': 10.207}, {'end': 2315.755, 'text': 'All right.', 'start': 2315.515, 'duration': 0.24}, {'end': 2318.177, 'text': 'So we have to actually use it as well.', 'start': 2315.795, 'duration': 2.382}, {'end': 2325.962, 'text': 'So again, once again, through dependency injection, private HTTP, HTTP client.', 'start': 2318.297, 'duration': 7.665}], 'summary': 'Using angular http client for dependency injection and data retrieval.', 'duration': 28.295, 'max_score': 2297.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2297667.jpg'}, {'end': 2410.997, 'src': 'embed', 'start': 2381.658, 'weight': 4, 'content': [{'end': 2384.74, 'text': "Then ngOnInit, we're going to change this to get beer.", 'start': 2381.658, 'duration': 3.082}, {'end': 2389.783, 'text': 'And because it returns an observable, we can subscribe to it.', 'start': 2386.201, 'duration': 3.582}, {'end': 2392.425, 'text': "We're not really going to cover and get into that stuff.", 'start': 2389.823, 'duration': 2.602}, {'end': 2397.828, 'text': "There's a ton of tutorials on what observables are and subscribing to them.", 'start': 2393.826, 'duration': 4.002}, {'end': 2399.61, 'text': 'But we just put in subscribe.', 'start': 2398.189, 'duration': 1.421}, {'end': 2401.611, 'text': 'We take the data.', 'start': 2400.75, 'duration': 0.861}, {'end': 2408.295, 'text': 'And then we can take our bruise object here and store that data.', 'start': 2402.792, 'duration': 5.503}, {'end': 2410.997, 'text': 'So this.bruise equals data.', 'start': 2408.695, 'duration': 2.302}], 'summary': 'Ngoninit function subscribes to observable to get beer data.', 'duration': 29.339, 'max_score': 2381.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2381658.jpg'}, {'end': 2471.592, 'src': 'embed', 'start': 2442.659, 'weight': 0, 'content': [{'end': 2447.921, 'text': "We're going to import HTTP client module from Angular common HTTP right here.", 'start': 2442.659, 'duration': 5.262}, {'end': 2456.104, 'text': 'Then we take our HTTP client module and we add it here in our imports right there.', 'start': 2448.621, 'duration': 7.483}, {'end': 2459.155, 'text': 'So now if we save it, And we go back.', 'start': 2456.645, 'duration': 2.51}, {'end': 2461.549, 'text': 'And we click on breweries.', 'start': 2460.489, 'duration': 1.06}, {'end': 2468.211, 'text': "Of course we're not listing them out yet right here in the template, but we can see in the console.", 'start': 2462.71, 'duration': 5.501}, {'end': 2471.592, 'text': 'we have a list of the breweries, which means it now works.', 'start': 2468.211, 'duration': 3.381}], 'summary': 'Imported http client module from angular common http, successfully retrieving and logging a list of breweries.', 'duration': 28.933, 'max_score': 2442.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2442659.jpg'}, {'end': 2855.499, 'src': 'embed', 'start': 2829.151, 'weight': 3, 'content': [{'end': 2836.759, 'text': 'So at this point you have a number of options of actually deploying it to somewhere like GitHub pages, Netlify, your own hosting.', 'start': 2829.151, 'duration': 7.608}, {'end': 2843.707, 'text': "And it's basically this particular distribution folder that it will be loading.", 'start': 2838.181, 'duration': 5.526}, {'end': 2855.499, 'text': 'And perhaps I will release another video where I run through some of the more popular options of how to launch or deploy your Angular app in different settings,', 'start': 2844.307, 'duration': 11.192}], 'summary': 'Options for deploying angular app to github pages, netlify, or own hosting discussed.', 'duration': 26.348, 'max_score': 2829.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2829151.jpg'}], 'start': 2054.724, 'title': 'Angular app development', 'summary': 'Discusses creating and using services in angular, including generating a service with angular cli and using the angular http client to connect with a public api. it also covers developing an angular app to fetch and display a list of breweries using the http client and demonstrates the use of observables, ngif, ngfor, and basic styling, followed by instructions for production build and deployment options.', 'chapters': [{'end': 2325.962, 'start': 2054.724, 'title': 'Angular services and http client', 'summary': 'Discusses creating and using services in angular, including generating a service with angular cli, implementing a basic method in the service logic, and utilizing the angular http client to connect with a public api.', 'duration': 271.238, 'highlights': ['Creating a service with Angular CLI The speaker demonstrates generating a service named HTTP using Angular CLI, showcasing the practical application of Angular CLI in creating services.', 'Implementing a basic method in the service logic The chapter highlights the creation of a simple method in the service logic to demonstrate its functionality, emphasizing the practical implementation of service logic in Angular.', 'Utilizing the Angular HTTP client to connect with a public API The transcript discusses the use of the Angular HTTP client to connect with a public API, showcasing the practical application of the HTTP client for data retrieval and display in an Angular app.']}, {'end': 2884.432, 'start': 2327.342, 'title': 'Angular app development', 'summary': 'Covers developing an angular app to fetch and display a list of breweries using the http client, demonstrating the use of observables, ngif, ngfor, and basic styling, followed by instructions for production build and deployment options.', 'duration': 557.09, 'highlights': ['Developing an Angular app to fetch and display a list of breweries using the HTTP client The chapter demonstrates the process of building an Angular app to fetch a list of breweries using the HTTP client module, and subscribing to an observable to store and display the retrieved data.', 'Usage of observables, ngIf, and ngFor Observables are used to handle asynchronous data retrieval, while ngIf and ngFor directives are employed for conditional rendering and iteration through an array of brewery objects.', "Instructions for production build and deployment options The chapter provides guidance on creating a production build with minification using 'ng build --prod' and explores deployment options such as GitHub pages, Netlify, and custom server environments for hosting the app's distribution folder."]}], 'duration': 829.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_TLhUCjY9iA/pics/_TLhUCjY9iA2054724.jpg', 'highlights': ['Developing an Angular app to fetch and display a list of breweries using the HTTP client', 'Utilizing the Angular HTTP client to connect with a public API', 'Creating a service with Angular CLI', 'Instructions for production build and deployment options', 'Usage of observables, ngIf, and ngFor', 'Implementing a basic method in the service logic']}], 'highlights': ['Linode supplies servers for deploying apps, sites, and services, with simple pricing starting at $5 per month and a free $20 credit on sign up.', "Linode's one-click apps make it easy to set up a web stack or a WordPress instance in under a minute.", 'The tutorial covers core Angular concepts, including installation, basic templating, data binding, style and class binding, routing, fetching data from an API with the HTTP client, and deployment.', 'Components are essential as they form the building blocks of an Angular app, comprising the main heart of the component, the component decorator for various properties, and the component logic, which are crucial sections in developing a demonstration app.', 'The folder structure of an Angular 8 project encompasses E2E for end-to-end testing, node modules for dependencies, source for code, app for Angular 8 code, index.html as the entry point, and styles.scss for global styles, with a minimal focus on testing and node modules.', 'The tutorial emphasizes the need for prior knowledge in HTML, CSS, and basic JavaScript before attempting to learn Angular.', 'The tutorial explains the process of installing Node.js and the Angular CLI for managing Angular 8 projects.', 'Developing a simple demonstration app involves working with the three main elements of a component: the imports, the component decorator for various properties, and the component logic, which are essential in building out a demonstration app.', "The importance of running 'ng serve -o' for hot reloading and automatic browser reloading during development is emphasized in the tutorial.", 'Demonstrates using Angular CLI to generate components and routes.', 'Explains updating the app.module.ts and app-routing file to add components and define routes.', 'The ng model facilitates two-way data binding, allowing the input property to both receive and send information from and into the component logic in homecomponent.ts.', 'Demonstrates event binding and click event binding, showcasing how data is updated and reflected in the template instantly.', 'The ng-template allows conditionally rendering content based on template expressions, such as a boolean value or a defined expression like click counter > 4, which is a useful feature for serious Angular app development.', 'The chapter introduces the concept of style binding in Angular, providing a foundation for dynamically modifying UI appearance based on events in the Angular app.', 'The chapter demonstrates using style binding to change the background color of an HTML element based on a conditional expression, where the click counter value is used to dynamically alter the background color.', 'The chapter explains using NG style to apply multiple CSS styles, demonstrating the use of expressions for background color and border properties, and showcasing the effect of the click counter on the styles.', 'It then outlines the usage of NG class for adding and removing classes based on an expression, with an example of creating an active class and modifying the component CSS file to incorporate the class rules.', 'Furthermore, it delves into employing ng class to reference a method for adding or removing classes, illustrating the use of expressions within the method to define the classes based on the click counter value.', 'Developing an Angular app to fetch and display a list of breweries using the HTTP client', 'Utilizing the Angular HTTP client to connect with a public API', 'Creating a service with Angular CLI', 'Instructions for production build and deployment options', 'Usage of observables, ngIf, and ngFor', 'Implementing a basic method in the service logic']}