title
Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, Components, Databinding

description
Enjoy this Angular 2 Tutorial, which gives you a complete Introduction Angular 2 - including the Setup with Angular 2 CLI, Components and Databinding. Enjoy the complete (updated to the latest version of Angular), extremely comprehensive, 5-star rated course: https://acad.link/angular You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). This Video covers: ➤ Complete Angular 2 Introduction ➤ Angular 2 CLI Setup & Usage ➤ Components ➤ Databinding

detail
{'title': 'Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, Components, Databinding', 'heatmap': [{'end': 682.63, 'start': 555.752, 'weight': 1}, {'end': 2783.636, 'start': 2715.713, 'weight': 0.733}], 'summary': 'This angular 2 tutorial covers basics of application setup with angular 2 cli, creating components, single-page applications, folder structure, typescript benefits, component usage, and data binding methods including string interpolation, property binding, event binding, and two-way data binding.', 'chapters': [{'end': 40.673, 'segs': [{'end': 40.673, 'src': 'embed', 'start': 1.414, 'weight': 0, 'content': [{'end': 2.795, 'text': 'Hi, welcome to this video.', 'start': 1.414, 'duration': 1.381}, {'end': 10.298, 'text': 'This video contains lectures of the first two modules of my five-star rated Udemy course on Angular 2,', 'start': 3.315, 'duration': 6.983}, {'end': 16.28, 'text': 'and it will walk you through the very basics of setting up your Angular 2 application with the Angular 2 CLI,', 'start': 10.298, 'duration': 5.982}, {'end': 18.822, 'text': 'and then creating your components and using data binding.', 'start': 16.28, 'duration': 2.542}, {'end': 26.286, 'text': "By the end of the video you'll be able to create your first Angular 2 applications and not only know how to create it but what you're doing there.", 'start': 18.942, 'duration': 7.344}, {'end': 31.328, 'text': "If you enjoy it, definitely have a look at my full course to which you'll find a link in the description.", 'start': 26.926, 'duration': 4.402}, {'end': 34.01, 'text': 'And with that, I wish you a lot of fun with the video.', 'start': 31.888, 'duration': 2.122}, {'end': 40.673, 'text': 'Let me quickly go over what Angular 2 actually is.', 'start': 38.172, 'duration': 2.501}], 'summary': 'This video covers setting up an angular 2 application with cli and creating components, enabling viewers to create their first applications and understand angular 2.', 'duration': 39.259, 'max_score': 1.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1414.jpg'}], 'start': 1.414, 'title': 'Angular 2 basics & application setup', 'summary': 'Covers the basics of setting up an angular 2 application with the angular 2 cli, creating components, and using data binding, leading to the ability to create the first angular 2 applications with a link to a full course.', 'chapters': [{'end': 40.673, 'start': 1.414, 'title': 'Angular 2 basics & application setup', 'summary': 'Covers the basics of setting up an angular 2 application with the angular 2 cli, creating components, and using data binding, leading to the ability to create the first angular 2 applications with a link to a full course.', 'duration': 39.259, 'highlights': ['The video contains lectures of the first two modules of a five-star rated Udemy course on Angular 2, focusing on setting up Angular 2 application with the Angular 2 CLI and creating components with data binding.', 'By the end of the video, viewers will be able to create their first Angular 2 applications and understand the process.', 'The speaker encourages viewers to explore the full course for more in-depth learning and provides a link in the video description.']}], 'duration': 39.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1414.jpg', 'highlights': ['The video contains lectures of the first two modules of a five-star rated Udemy course on Angular 2, focusing on setting up Angular 2 application with the Angular 2 CLI and creating components with data binding.', 'By the end of the video, viewers will be able to create their first Angular 2 applications and understand the process.', 'The speaker encourages viewers to explore the full course for more in-depth learning and provides a link in the video description.']}, {'end': 1134.167, 'segs': [{'end': 476.671, 'src': 'embed', 'start': 446.566, 'weight': 1, 'content': [{'end': 448.907, 'text': 'The second reason is, throughout this course,', 'start': 446.566, 'duration': 2.341}, {'end': 461.511, 'text': 'I will use the Angular command line interface or the Angular 2 command line interface to create all these examples and several components or general pieces of those applications,', 'start': 448.907, 'duration': 12.604}, {'end': 463.132, 'text': "and you'll learn it throughout this course.", 'start': 461.511, 'duration': 1.621}, {'end': 468.065, 'text': "Now, no worries, if you don't want to use the command line interface.", 'start': 464.082, 'duration': 3.983}, {'end': 476.671, 'text': 'all the code we write works exactly the same way in your custom setup project and all the code is in one single source folder,', 'start': 468.065, 'duration': 8.606}], 'summary': 'Angular cli used to create examples and components, suitable for custom setup projects.', 'duration': 30.105, 'max_score': 446.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg446566.jpg'}, {'end': 518.636, 'src': 'embed', 'start': 490.333, 'weight': 2, 'content': [{'end': 494.517, 'text': 'However, the CLI makes it real easy to create projects and that as well, use it.', 'start': 490.333, 'duration': 4.184}, {'end': 501.624, 'text': "So, as mentioned before, for the CLI we'll also need Node.js, since well, we need Node's package manager, npm,", 'start': 495.057, 'duration': 6.567}, {'end': 509.191, 'text': 'to install the Angular CLI in the first place and the CLI itself will also need Node to well do all the magic for us.', 'start': 501.624, 'duration': 7.567}, {'end': 512.794, 'text': "So enough of the talking, let's install the Angular 2 CLI then.", 'start': 510.072, 'duration': 2.722}, {'end': 518.636, 'text': "This can easily be done from the terminal or command line interface if you're on Windows.", 'start': 514.534, 'duration': 4.102}], 'summary': 'Using cli to install angular 2, requires node.js and npm', 'duration': 28.303, 'max_score': 490.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg490333.jpg'}, {'end': 682.63, 'src': 'heatmap', 'start': 555.752, 'weight': 1, 'content': [{'end': 557.073, 'text': "I'll see you once this is finished.", 'start': 555.752, 'duration': 1.321}, {'end': 560.461, 'text': 'At the end, you should see something like this.', 'start': 558.74, 'duration': 1.721}, {'end': 565.085, 'text': 'Of course, the version might vary whenever you watch this video, but it should finish without an error.', 'start': 560.522, 'duration': 4.563}, {'end': 572.351, 'text': 'Then in the same terminal or command line window, navigate into the directory where you want to host all your project folders.', 'start': 565.546, 'duration': 6.805}, {'end': 575.834, 'text': 'Once you are there, simply run ng.', 'start': 573.012, 'duration': 2.822}, {'end': 583.7, 'text': 'this will well trigger the Angular CLI we just installed new to create a new project and then the name of the project,', 'start': 575.834, 'duration': 7.866}, {'end': 585.522, 'text': 'which will also be the name of the folder.', 'start': 583.7, 'duration': 1.822}, {'end': 587.984, 'text': "So I'm going to call it first app.", 'start': 585.782, 'duration': 2.202}, {'end': 594.22, 'text': 'Now this will automatically install a couple of dependencies and so on.', 'start': 590.034, 'duration': 4.186}, {'end': 596.463, 'text': 'It will also take some seconds.', 'start': 594.28, 'duration': 2.183}, {'end': 597.885, 'text': "So I'll be back once this is done.", 'start': 596.503, 'duration': 1.382}, {'end': 598.245, 'text': 'See you then.', 'start': 597.905, 'duration': 0.34}, {'end': 606.405, 'text': 'So now the setup here finished and the Angular 2 CLI automatically creates a tiny little app for you.', 'start': 600.202, 'duration': 6.203}, {'end': 607.566, 'text': "So let's have a look at this.", 'start': 606.485, 'duration': 1.081}, {'end': 618.352, 'text': 'We can easily start up our little web server I was talking of earlier, also managed and created by the Angular CLI, as well as our app,', 'start': 608.367, 'duration': 9.985}, {'end': 620.053, 'text': 'by typing ng-zerf.', 'start': 618.352, 'duration': 1.701}, {'end': 627.377, 'text': 'This will, well, first we have to navigate into our newly created folder.', 'start': 621.114, 'duration': 6.263}, {'end': 629.198, 'text': 'So now ng-zerf.', 'start': 627.797, 'duration': 1.401}, {'end': 637.111, 'text': 'This will spin up the server and also keep the server running, and whenever you change something in your app, it will live update,', 'start': 629.707, 'duration': 7.404}, {'end': 638.692, 'text': "so you don't have to hit the reload button.", 'start': 637.111, 'duration': 1.581}, {'end': 642.275, 'text': "But we're not at this point yet so let's have a look at our application first.", 'start': 639.053, 'duration': 3.222}, {'end': 652.327, 'text': "Over in the browser I'll head to localhost This is where this app is hosted at and you'll see first app works.", 'start': 643.435, 'duration': 8.892}, {'end': 655.208, 'text': 'Yay, you created your first Angular 2 application.', 'start': 652.527, 'duration': 2.681}, {'end': 659.79, 'text': "Though I see your point that we didn't actually do that much.", 'start': 655.708, 'duration': 4.082}, {'end': 662.351, 'text': "So let's dive into the code and change a little bit.", 'start': 660.21, 'duration': 2.141}, {'end': 677.705, 'text': 'so i opened this project in webstorm, my favorite ide for angular 2 development, since it ships with great angular 2 and typescript support.', 'start': 668.795, 'duration': 8.91}, {'end': 682.63, 'text': 'however, you may of course use whichever editor or ide you prefer.', 'start': 677.705, 'duration': 4.925}], 'summary': 'Angular 2 setup completed with live updating server, hosted app at localhost, and opened in webstorm ide.', 'duration': 126.878, 'max_score': 555.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg555752.jpg'}, {'end': 652.327, 'src': 'embed', 'start': 629.707, 'weight': 0, 'content': [{'end': 637.111, 'text': 'This will spin up the server and also keep the server running, and whenever you change something in your app, it will live update,', 'start': 629.707, 'duration': 7.404}, {'end': 638.692, 'text': "so you don't have to hit the reload button.", 'start': 637.111, 'duration': 1.581}, {'end': 642.275, 'text': "But we're not at this point yet so let's have a look at our application first.", 'start': 639.053, 'duration': 3.222}, {'end': 652.327, 'text': "Over in the browser I'll head to localhost This is where this app is hosted at and you'll see first app works.", 'start': 643.435, 'duration': 8.892}], 'summary': 'Server spins up, live updates without reload, hosted at localhost, app works', 'duration': 22.62, 'max_score': 629.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg629707.jpg'}, {'end': 970.679, 'src': 'embed', 'start': 942.784, 'weight': 6, 'content': [{'end': 956.152, 'text': 'So it looks like this selector is important here because it allows us to basically create new HTML components or elements which we can place in our HTML code to load our components.', 'start': 942.784, 'duration': 13.368}, {'end': 960.354, 'text': "because this loading text here is certainly not what we're seeing.", 'start': 956.792, 'duration': 3.562}, {'end': 963.856, 'text': "We're seeing the content of this HTML file.", 'start': 960.794, 'duration': 3.062}, {'end': 968.378, 'text': 'Well, and this dynamic content then interrupted into the content, kind of.', 'start': 964.056, 'duration': 4.322}, {'end': 970.679, 'text': 'So this is what we see.', 'start': 968.738, 'duration': 1.941}], 'summary': 'Selector allows creating html components, loading dynamic content.', 'duration': 27.895, 'max_score': 942.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg942784.jpg'}], 'start': 41.313, 'title': 'Angular 2 applications and cli setup', 'summary': 'Discusses angular 2 single-page applications, highlighting benefits such as reduced server requests and an app-like experience. it also covers setting up angular 2 cli, including installation, project creation, and project structure overview.', 'chapters': [{'end': 489.812, 'start': 41.313, 'title': 'Angular 2 single-page applications', 'summary': 'Discusses single-page applications, emphasizing the difference from traditional web applications and the benefits of using angular 2, including reducing server requests and providing an app-like feeling in the browser, with a mention of the essential requirement of node.js for creating angular 2 applications.', 'duration': 448.499, 'highlights': ['Single-page applications handle user requests and re-render HTML pages through JavaScript, reducing the need for server interactions, leading to faster performance and a more app-like experience in the browser. In single-page applications, the client handles user requests and re-renders HTML pages through JavaScript, eliminating the need for frequent server interactions, resulting in faster performance and a more app-like experience in the browser.', 'Angular 2 reduces server requests by asynchronously handling responses and incorporating new data without requiring full page reloads, ultimately saving time and improving user experience. Angular 2 minimizes server requests by asynchronously handling responses and incorporating new data without necessitating full page reloads, saving time and improving user experience.', 'Node.js is essential for serving Angular 2 applications and using the Angular command line interface to create examples and components, providing a lightweight server and enabling efficient development. Node.js is crucial for serving Angular 2 applications and utilizing the Angular command line interface to create examples and components, offering a lightweight server and facilitating efficient development.']}, {'end': 1134.167, 'start': 490.333, 'title': 'Setting up angular 2 cli', 'summary': 'Covers the process of setting up angular 2 cli, including the installation process, project creation, and an overview of the project structure, providing insights on using node.js and npm, as well as live updates and components.', 'duration': 643.834, 'highlights': ['The CLI requires Node.js and npm for installation, which can be done globally using npm install minus g, with additional steps for Mac or Linux users. Node.js and npm are required for installing Angular 2 CLI globally. Mac or Linux users may need to add sudo for administrative rights.', 'Running ng in the project directory triggers the Angular CLI to create a new project, automatically installing dependencies. Executing ng in the project directory initiates the creation of a new project by the Angular CLI, including automatic installation of dependencies.', 'The Angular 2 CLI creates a web server for the app, providing live updates on changes without the need for manual reloading. Angular 2 CLI sets up a web server for the app, enabling live updates on changes without requiring manual reloading.', "The project structure consists of 'dist' for compiled code and 'source' for application code, with the latter written in TypeScript and compiled to JavaScript for browser compatibility. The project structure includes 'dist' for compiled code and 'source' for application code, written in TypeScript and compiled to JavaScript for browser compatibility.", 'The creation of new components allows for dynamic content in the HTML file, with the ability to live update changes in the browser. Creating new components enables dynamic content in the HTML file and facilitates live updates of changes in the browser.']}], 'duration': 1092.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg41313.jpg', 'highlights': ['Angular 2 reduces server requests by asynchronously handling responses and incorporating new data without requiring full page reloads, ultimately saving time and improving user experience.', 'Single-page applications handle user requests and re-render HTML pages through JavaScript, reducing the need for server interactions, leading to faster performance and a more app-like experience in the browser.', "The project structure includes 'dist' for compiled code and 'source' for application code, written in TypeScript and compiled to JavaScript for browser compatibility.", 'The creation of new components allows for dynamic content in the HTML file, with the ability to live update changes in the browser.', 'The Angular 2 CLI creates a web server for the app, providing live updates on changes without the need for manual reloading.', 'Node.js is crucial for serving Angular 2 applications and utilizing the Angular command line interface to create examples and components, offering a lightweight server and facilitating efficient development.', 'Executing ng in the project directory initiates the creation of a new project by the Angular CLI, including automatic installation of dependencies.', 'Angular 2 minimizes server requests by asynchronously handling responses and incorporating new data without necessitating full page reloads, saving time and improving user experience.', 'The CLI requires Node.js and npm for installation, which can be done globally using npm install minus g, with additional steps for Mac or Linux users.']}, {'end': 1499.351, 'segs': [{'end': 1486.92, 'src': 'embed', 'start': 1456.242, 'weight': 0, 'content': [{'end': 1461.383, 'text': 'All the other files here also are providing some configuration for our project.', 'start': 1456.242, 'duration': 5.141}, {'end': 1470.348, 'text': 'Most importantly, the angular-cli.json file and the angular-cli-build.js file, which allow you to, for example,', 'start': 1461.783, 'duration': 8.565}, {'end': 1478.234, 'text': 'when working with third-party projects, implement them here or generally change the basic setup of your application.', 'start': 1470.348, 'duration': 7.886}, {'end': 1486.92, 'text': 'Like, for example, the prefix you want to set for each selector by default, where your source file lives, and so on.', 'start': 1478.314, 'duration': 8.606}], 'summary': 'Angular project files provide configuration options for setup and customization.', 'duration': 30.678, 'max_score': 1456.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1456242.jpg'}], 'start': 1135.828, 'title': 'Angular application structure and configuration', 'summary': 'Discusses the folder structure and purpose of each folder in an angular app, the structure of an angular 2 application including typescript files, and explains the importance of tsconfig.json and typings.d.ts file in typescript for compilation and managing dependencies.', 'chapters': [{'end': 1253.427, 'start': 1135.828, 'title': 'Angular app folder structure', 'summary': "Discusses the folder structure of an angular app, including the purpose of each folder, such as 'dist' for deployment and 'node-modules' for project dependencies.", 'duration': 117.599, 'highlights': ["The 'dist' folder is for the deployed or built app, where Angular 2 or the Angular CLI builds the application whenever changes are made and saved, triggering live reload of the browser, and contains the files served in the browser.", "The 'node-modules' folder holds all the dependencies of the project, including development-only dependencies, which are copied into the 'vendor' folder in the 'dist' folder for deployment.", "The 'config' folder holds some config mostly for testing purposes, while the 'public' folder is empty and can be used to store files to be copied into the 'dist' folder, such as images.", "The 'E2E' folder is for end-to-end testing and the 'source' folder is the core of the app.", "DCLI also supports compiling as CSS, so SAS code to CSS if required, and some optimizations need to be done, such as copying only the relevant dependencies into the 'vendor' folder in the 'dist' folder."]}, {'end': 1359.917, 'start': 1253.707, 'title': 'Angular 2 application structure', 'summary': 'Explains the structure of an angular 2 application, including the app folder with typescript files and templates, the main.ts file responsible for starting the application, and the system.config file for configuring system.js and managing dependencies.', 'duration': 106.21, 'highlights': ['The app folder holds all TypeScript files and templates of components, while the root folder contains the crucial index.html file that loads and starts the app.', 'The main.ts file is responsible for starting up the Angular 2 application and needs to identify the first app as a component.', 'System.config is responsible for configuring system.js, the module loader that handles importing dependencies and is managed by the command-line interface.', 'The structure ensures that the server serves only the index.html file to render the single page application, simplifying the application loading process.']}, {'end': 1499.351, 'start': 1361.172, 'title': 'Understanding tsconfig.json and typings in typescript', 'summary': 'Explains the importance of tsconfig.json for typescript compilation and the role of typings.dts file in declaring variables and importing typings, serving as a bridge between javascript libraries and typescript code, ensuring compiler and ide support.', 'duration': 138.179, 'highlights': ['The typings.dts file declares one variable used in all TypeScript files, preventing compilation errors, and imports typings, serving as a bridge between JavaScript libraries and TypeScript code for compiler and IDE support.', 'The tsconfig.json file is important for TypeScript compilation, with default settings usually sufficient, but customizable for specific needs, ensuring proper understanding and modification when necessary.', "The temp folder is necessary for the Angular CLI during the build process, while other files like angular-cli.json and angular-cli-build.js provide configuration options for the project, allowing for customization of the application's setup.", "The angular-cli.json file and the angular-cli-build.js file provide configuration options for the project, allowing for customization of the application's setup, such as changing the prefix for each selector by default.", "The typings.dts file is crucial for ensuring that TypeScript code knows which types the JavaScript code uses, even though JavaScript doesn't have typings, preventing errors and enabling autocompletion support."]}], 'duration': 363.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1135828.jpg', 'highlights': ["The 'dist' folder contains the built app, triggering live reload of the browser. (importance: 5)", "The 'node-modules' folder holds all project dependencies, including dev-only ones. (importance: 4)", "The 'app' folder holds TypeScript files and templates of components. (importance: 3)", 'The typings.dts file declares one variable used in all TypeScript files. (importance: 2)', 'The tsconfig.json file is important for TypeScript compilation. (importance: 1)']}, {'end': 2694.967, 'segs': [{'end': 1607.258, 'src': 'embed', 'start': 1578.336, 'weight': 6, 'content': [{'end': 1583.649, 'text': 'Because, speaking of benefits, why would you want to use TypeScript instead of JavaScript?', 'start': 1578.336, 'duration': 5.313}, {'end': 1587.559, 'text': 'Well, there are some general reasons and some Angular 2 specific ones.', 'start': 1584.271, 'duration': 3.288}, {'end': 1596.315, 'text': 'The general reasons would be that you have that strong typing I just mentioned, which means that you set which property will have which type.', 'start': 1588.533, 'duration': 7.782}, {'end': 1598.596, 'text': 'For example, that property should be a string.', 'start': 1596.555, 'duration': 2.041}, {'end': 1607.258, 'text': 'If you then try to assign a type which does not match, the compiler and probably your IDE2 will give you an error.', 'start': 1599.256, 'duration': 8.002}], 'summary': 'Typescript offers strong typing, enabling error detection and prevention for property assignment.', 'duration': 28.922, 'max_score': 1578.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1578336.jpg'}, {'end': 1817.704, 'src': 'embed', 'start': 1786.395, 'weight': 1, 'content': [{'end': 1792.843, 'text': "install g typescript and I should add sudo, since I want Mac, so I'll do that.", 'start': 1786.395, 'duration': 6.448}, {'end': 1795.745, 'text': 'Enter my password here real quick.', 'start': 1794.264, 'duration': 1.481}, {'end': 1802.289, 'text': 'And that will install TypeScript globally on my machine.', 'start': 1800.168, 'duration': 2.121}, {'end': 1806.652, 'text': 'And in my case, as I already had it, just update it to the latest version.', 'start': 1803.05, 'duration': 3.602}, {'end': 1817.704, 'text': 'So until now you saw your first application, you saw how you could change a tiny bit of it.', 'start': 1813.001, 'duration': 4.703}], 'summary': 'Installed typescript globally and updated to the latest version for first application.', 'duration': 31.309, 'max_score': 1786.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1786395.jpg'}, {'end': 2020.191, 'src': 'embed', 'start': 1998.756, 'weight': 8, 'content': [{'end': 2007.983, 'text': 'this, as I mentioned first app component here has this extra app because Angular CLI put this app there.', 'start': 1998.756, 'duration': 9.227}, {'end': 2016.789, 'text': 'Because this is the root component being started in this main.ts file on the bootstrap methods, method which loads up our overall application.', 'start': 2008.383, 'duration': 8.406}, {'end': 2020.191, 'text': 'So this is the root component holding other components.', 'start': 2017.289, 'duration': 2.902}], 'summary': "Root component 'app' is loaded in main.ts file by angular cli.", 'duration': 21.435, 'max_score': 1998.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1998756.jpg'}, {'end': 2089.699, 'src': 'embed', 'start': 2061.542, 'weight': 0, 'content': [{'end': 2065.665, 'text': "for the component metadata we're importing from the Angular 2 framework.", 'start': 2061.542, 'duration': 4.123}, {'end': 2068.427, 'text': "That being said, that's a very important step.", 'start': 2066.446, 'duration': 1.981}, {'end': 2072.75, 'text': 'This component metadata, which you see attached right above this class.', 'start': 2068.827, 'duration': 3.923}, {'end': 2082.675, 'text': 'You can see that we have an add sign at the beginning which indicates that this is a TypeScript decorator which allows us to easily add metadata to a class.', 'start': 2074.091, 'duration': 8.584}, {'end': 2086.295, 'text': 'Now, rightfully, you may ask what is metadata??', 'start': 2083.475, 'duration': 2.82}, {'end': 2087.137, 'text': "What's that??", 'start': 2086.397, 'duration': 0.74}, {'end': 2089.699, 'text': 'What does it do??', 'start': 2089.02, 'duration': 0.679}], 'summary': 'Importing component metadata from angular 2 framework is a crucial step involving typescript decorators to easily add metadata to a class.', 'duration': 28.157, 'max_score': 2061.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2061542.jpg'}, {'end': 2231.493, 'src': 'embed', 'start': 2203.054, 'weight': 5, 'content': [{'end': 2214.263, 'text': 'it looks in this index.html file and in this index.html file you see this line here first app app with the loading text between the opening and closing tag.', 'start': 2203.054, 'duration': 11.209}, {'end': 2219.127, 'text': "now, this clearly isn't the default html file for each html tag.", 'start': 2214.263, 'duration': 4.864}, {'end': 2221.709, 'text': 'right, there is no first app tag in html.', 'start': 2219.127, 'duration': 2.582}, {'end': 2231.493, 'text': "Nonetheless, when loading the website, we're seeing this does that really work and nothing else?", 'start': 2223.021, 'duration': 8.472}], 'summary': "The index.html file contains a non-standard 'first app' tag causing unexpected behavior on the website.", 'duration': 28.439, 'max_score': 2203.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2203054.jpg'}, {'end': 2677.503, 'src': 'embed', 'start': 2648.692, 'weight': 3, 'content': [{'end': 2652.613, 'text': "It doesn't look like the components set up when we created a new component.", 'start': 2648.692, 'duration': 3.921}, {'end': 2656.154, 'text': 'We got rid of the external files and this still works.', 'start': 2653.033, 'duration': 3.121}, {'end': 2657.794, 'text': 'And this is how you work with a component.', 'start': 2656.214, 'duration': 1.58}, {'end': 2663.156, 'text': 'You configure it in this metadata, in this decorator.', 'start': 2658.175, 'duration': 4.981}, {'end': 2666.917, 'text': "And as you can see, I'm not even using this title anymore, so I can really get rid of that.", 'start': 2663.176, 'duration': 3.741}, {'end': 2669.478, 'text': 'And now I got an empty class.', 'start': 2667.597, 'duration': 1.881}, {'end': 2677.503, 'text': 'And all of my logic lives inside of this metadata, which shows you how powerful and important this metadata is.', 'start': 2671.561, 'duration': 5.942}], 'summary': 'Demonstrates setting up a component with metadata and decorator, emphasizing the importance of metadata.', 'duration': 28.811, 'max_score': 2648.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2648692.jpg'}], 'start': 1505.297, 'title': 'Angular 2 concepts', 'summary': 'Covers typescript benefits, angular 2 app components, and component metadata. it emphasizes strong typing, smaller components, and essential metadata fields.', 'chapters': [{'end': 1817.704, 'start': 1505.297, 'title': 'Typescript overview and benefits', 'summary': "Explains what typescript is, its benefits over javascript, and why it is preferred for angular 2, emphasizing strong typing, next generation javascript features, and angular 2's support for typescript.", 'duration': 312.407, 'highlights': ['TypeScript offers strong typing, preventing errors and providing an extra level of security by checking types, which is one of its biggest benefits.', "Using TypeScript allows for the utilization of next generation JavaScript features, such as classes and modular multi-file approach, transpiling them into today's JavaScript.", 'TypeScript provides missing JavaScript features like interfaces and generics, enhancing code quality and forcing implementation of certain methods.', 'Angular 2 documentation and support is mostly in TypeScript, making it easier for developers to use TypeScript for Angular 2 projects.', 'The Angular 2 team chose TypeScript as the main language for Angular 2 due to its benefits over JavaScript, and the course strongly encourages the use of TypeScript.']}, {'end': 2061.542, 'start': 1818.725, 'title': 'Angular 2 app components and directives', 'summary': 'Explains the core concepts of angular 2 applications, focusing on components and directives, emphasizing the importance of creating smaller components that work together to form the overall application.', 'duration': 242.817, 'highlights': ['Angular 2 applications are built using components and directives, with components being directives, focusing on creating smaller components that work together. The chapter emphasizes the core concepts of Angular 2 applications, highlighting the role of components and directives in building the application, underscoring the importance of creating smaller components that work together to form the overall application.', 'Components in Angular 2 not only consist of HTML code rendered in the browser but also include the logic behind that code, including handling user events, loading data, and interacting with other components. It explains that components in Angular 2 encompass both the HTML code rendered in the browser and the logic behind that code, involving handling user events, loading data, and interacting with other components.', "The root component in an Angular 2 application holds multiple smaller components, forming the key concept of an Angular 2 application. The chapter highlights the root component's role in holding multiple smaller components, forming the key concept of an Angular 2 application."]}, {'end': 2694.967, 'start': 2061.542, 'title': 'Angular 2 component metadata', 'summary': 'Explains the essential role of component metadata in angular 2, including the use of typescript decorators to add metadata to a class and the key fields in the component decorator, such as selector, template url, and style urls.', 'duration': 633.425, 'highlights': ['Component metadata involves adding TypeScript decorators to a class to easily attach metadata. The chapter emphasizes the use of TypeScript decorators to attach metadata to a class, enabling the addition of essential information to the class.', 'Key fields in the component decorator include selector, template URL, and style URLs. The component decorator contains important fields such as selector, template URL, and style URLs, which play a crucial role in instructing Angular 2 on rendering components and applying styles.', 'The selector in the component decorator instructs Angular 2 on where to render the component in the HTML code. The selector in the component decorator guides Angular 2 on locating and rendering the component within the HTML code, enabling the seamless integration of components into the application.', 'Using an external template or styling requires setting up module ID to maintain relative references. The usage of external template or styling necessitates the setup of module ID to preserve relative references, ensuring the appropriate file locations are maintained during production and compilation.', 'Component metadata is essential for configuring and defining components, with the template being a mandatory requirement for the view presented to the user. The metadata plays a vital role in configuring and defining components, with the template being a fundamental necessity for creating a view accessible to the user.']}], 'duration': 1189.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg1505297.jpg', 'highlights': ['TypeScript offers strong typing, preventing errors and providing an extra level of security by checking types, which is one of its biggest benefits.', "Using TypeScript allows for the utilization of next generation JavaScript features, such as classes and modular multi-file approach, transpiling them into today's JavaScript.", 'TypeScript provides missing JavaScript features like interfaces and generics, enhancing code quality and forcing implementation of certain methods.', 'Angular 2 applications are built using components and directives, with components being directives, focusing on creating smaller components that work together.', 'The root component in an Angular 2 application holds multiple smaller components, forming the key concept of an Angular 2 application.', 'Component metadata involves adding TypeScript decorators to a class to easily attach metadata.', 'Key fields in the component decorator include selector, template URL, and style URLs.', 'The selector in the component decorator instructs Angular 2 on where to render the component in the HTML code.', 'Using an external template or styling requires setting up module ID to maintain relative references.', 'Component metadata is essential for configuring and defining components, with the template being a mandatory requirement for the view presented to the user.']}, {'end': 4179.057, 'segs': [{'end': 2785.837, 'src': 'heatmap', 'start': 2694.967, 'weight': 0, 'content': [{'end': 2697.288, 'text': 'by just adding this template metadata.', 'start': 2694.967, 'duration': 2.321}, {'end': 2705.963, 'text': 'So this is how you transform a default TypeScript class into an Angular 2 component,', 'start': 2698.735, 'duration': 7.228}, {'end': 2713.791, 'text': 'how it is loaded through the selector here in the index.html file and how you set it up or configure it with the metadata.', 'start': 2705.963, 'duration': 7.828}, {'end': 2715.093, 'text': "That's all nice.", 'start': 2714.132, 'duration': 0.961}, {'end': 2720.679, 'text': "But in the next lecture, we'll finally have a look at adding our own components.", 'start': 2715.713, 'duration': 4.966}, {'end': 2729.167, 'text': 'So in order to do this, I will open up a new terminal.', 'start': 2726.926, 'duration': 2.241}, {'end': 2731.989, 'text': 'And again, this is our normal terminal here, just in my IDE.', 'start': 2729.387, 'duration': 2.602}, {'end': 2736.351, 'text': 'And I will use the ng command again.', 'start': 2732.589, 'duration': 3.762}, {'end': 2739.893, 'text': "So I'll navigate into my project folder.", 'start': 2736.371, 'duration': 3.522}, {'end': 2744.436, 'text': 'And then with ng generate, I can generate a new project.', 'start': 2740.193, 'duration': 4.243}, {'end': 2748.058, 'text': 'piece, so to say, of my application.', 'start': 2745.556, 'duration': 2.502}, {'end': 2749.279, 'text': 'for example, component.', 'start': 2748.058, 'duration': 1.221}, {'end': 2752.621, 'text': 'later you will learn about different things you can create.', 'start': 2749.279, 'duration': 3.342}, {'end': 2755.043, 'text': 'you might use in your angular 2 app.', 'start': 2752.621, 'duration': 2.422}, {'end': 2765.271, 'text': "so i will create a component by using ng generate component and then i give this component a name and i will name my, let's say, other.", 'start': 2755.043, 'duration': 10.228}, {'end': 2770.935, 'text': 'basically, other component will be the name at the end, other, and then hit enter.', 'start': 2765.271, 'duration': 5.664}, {'end': 2774.378, 'text': 'now this will create a couple of new files and it will create a new folder too.', 'start': 2770.935, 'duration': 3.443}, {'end': 2779.834, 'text': 'As you see, it created this other folder.', 'start': 2777.873, 'duration': 1.961}, {'end': 2783.636, 'text': 'Now in this folder you again find the same files you saw before.', 'start': 2780.574, 'duration': 3.062}, {'end': 2785.837, 'text': "I'll get rid of this testing file.", 'start': 2784.236, 'duration': 1.601}], 'summary': 'Creating a new angular 2 component using ng generate component, resulting in the creation of new files and a folder.', 'duration': 90.87, 'max_score': 2694.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2694967.jpg'}, {'end': 2832.512, 'src': 'embed', 'start': 2804.246, 'weight': 4, 'content': [{'end': 2809.554, 'text': 'You will learn about onInit and lifecycle hooks, what that is in the end later.', 'start': 2804.246, 'duration': 5.308}, {'end': 2814.381, 'text': "I'll also get rid of the constructor for now and of the import here.", 'start': 2809.934, 'duration': 4.447}, {'end': 2818.267, 'text': 'So now we got Well, pretty empty file.', 'start': 2814.562, 'duration': 3.705}, {'end': 2822.368, 'text': 'As you can see, the selector was automatically set to FA other.', 'start': 2818.607, 'duration': 3.761}, {'end': 2832.512, 'text': 'That is because, when creating this project, I added the prefix flag to the Angular CLI and set the prefix to FA,', 'start': 2822.608, 'duration': 9.904}], 'summary': 'Learning about oninit and lifecycle hooks in angular.', 'duration': 28.266, 'max_score': 2804.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2804246.jpg'}, {'end': 3228.154, 'src': 'embed', 'start': 3190.835, 'weight': 6, 'content': [{'end': 3195.516, 'text': "So with this, we're now using another component in our first component.", 'start': 3190.835, 'duration': 4.681}, {'end': 3197.157, 'text': "So we're nesting components.", 'start': 3195.536, 'duration': 1.621}, {'end': 3204.719, 'text': "We're having this root component which gets started by the bootstrap method and which then holds our new component,", 'start': 3197.957, 'duration': 6.762}, {'end': 3207.94, 'text': 'FA other or the other component inside of it.', 'start': 3204.719, 'duration': 3.221}, {'end': 3228.154, 'text': "So that's nice, but let's say we want to add another component and this component should be a sibling of this FA other component.", 'start': 3220.287, 'duration': 7.867}], 'summary': 'Nesting components to have a sibling component.', 'duration': 37.319, 'max_score': 3190.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg3190835.jpg'}, {'end': 3420.857, 'src': 'embed', 'start': 3365.167, 'weight': 1, 'content': [{'end': 3369.09, 'text': "make sure to not add the file endings here you're not having.", 'start': 3365.167, 'duration': 3.923}, {'end': 3370.711, 'text': 'ts here at your exports.', 'start': 3369.09, 'duration': 1.621}, {'end': 3373.153, 'text': "you don't need that.", 'start': 3370.711, 'duration': 2.442}, {'end': 3375.775, 'text': 'the same is true for the imports, by the way.', 'start': 3373.153, 'duration': 2.622}, {'end': 3390.92, 'text': 'so now i have this another component and now, in the first app component, I can just add another component and I can add the import here too.', 'start': 3375.775, 'duration': 15.145}, {'end': 3394.08, 'text': 'That was this input grouping I was talking about.', 'start': 3391.46, 'duration': 2.62}, {'end': 3400.622, 'text': "I'm now importing all of that from the other folder, even though the modules are technically in different files.", 'start': 3394.66, 'duration': 5.962}, {'end': 3404.983, 'text': "And that's just because I'm preparing this in this index.ts file.", 'start': 3401.062, 'duration': 3.921}, {'end': 3409.004, 'text': "So now I'm ready to use this another component.", 'start': 3406.483, 'duration': 2.521}, {'end': 3413.894, 'text': "I'll add the selector, the HTML tag here.", 'start': 3410.373, 'duration': 3.521}, {'end': 3416.515, 'text': 'And now you can see another works.', 'start': 3415.035, 'duration': 1.48}, {'end': 3420.857, 'text': 'So this sibling component to the other component works too.', 'start': 3416.996, 'duration': 3.861}], 'summary': 'Imported and added a new component to the app, enabling smooth functionality.', 'duration': 55.69, 'max_score': 3365.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg3365167.jpg'}], 'start': 2694.967, 'title': 'Angular 2 components and usage', 'summary': 'Covers transforming typescript class into angular 2 component, using ng generate command, nesting and view encapsulation, and data binding methods including string interpolation, property binding, and event binding.', 'chapters': [{'end': 2914.067, 'start': 2694.967, 'title': 'Angular 2 components', 'summary': 'Covers transforming a default typescript class into an angular 2 component, using the ng generate command to create a new component, and the importance of unique selectors to avoid interference with default html tags or third-party libraries.', 'duration': 219.1, 'highlights': ['The chapter covers transforming a default TypeScript class into an Angular 2 component, using the ng generate command to create a new component, and the importance of unique selectors to avoid interference with default HTML tags or third-party libraries.', "Using the ng generate command, a new component named 'other' is created, which automatically sets the selector to 'FA-other' due to the prefix flag set in Angular CLI, ensuring unique selectors to avoid interference with default HTML tags or third-party libraries.", 'The importance of unique selectors is emphasized to prevent interference with default HTML tags or third-party libraries, with the recommendation to use clear prefixes, such as company name abbreviations, project abbreviations, or personal names, to ensure uniqueness.']}, {'end': 3189.734, 'start': 2914.067, 'title': 'Using angular 2 components', 'summary': 'Explains how to use a custom component in an angular 2 application, emphasizing the importance of informing angular 2 about the components being used and the best practices for organizing and importing components.', 'duration': 275.667, 'highlights': ['Informing Angular 2 about the custom components being used is crucial for their recognition and functionality within the application. The chapter highlights the importance of informing Angular 2 about the components being used, emphasizing that this is crucial for the components to be recognized and functional within the application.', 'Organizing and importing components using barrels in Angular 2 applications is a good practice, leading to shorter import statements, code savings, and improved readability. The chapter explains the concept of barrels in Angular 2, highlighting that organizing and importing components using barrels is a good practice. It leads to shorter import statements, saves code, and improves readability.', 'Emphasizing the significance of following best practices for organizing and importing components in Angular 2 applications. The chapter emphasizes the significance of following best practices for organizing and importing components in Angular 2 applications, highlighting the importance of adhering to these practices.']}, {'end': 3797.796, 'start': 3190.835, 'title': 'Angular 2 component nesting and view encapsulation', 'summary': 'Demonstrates how to nest components, create sibling components, and utilize view encapsulation in angular 2, including the concept of shadow dom emulation and how it allows for styling encapsulation. it also explains the ability to use multiple components in the same template.', 'duration': 606.961, 'highlights': ['The chapter demonstrates how to nest components and create sibling components in Angular 2 It explains the process of nesting components within the root component and creating a sibling component within a specific folder.', 'The concept of view encapsulation in Angular 2 is explained, including the emulation of shadow DOM and its functionality It elaborates on view encapsulation in Angular 2, discussing how it emulates the shadow DOM to ensure styling is only applied to specific elements within a component, and how it adds a cryptic attribute to identify elements for styling.', 'The ability to use multiple components in the same template is demonstrated It showcases the capability of using multiple components within the same template and the process of styling encapsulation for each component.']}, {'end': 4179.057, 'start': 3798.817, 'title': 'Angular 2 components and data binding', 'summary': 'Discusses the use of ng-content to pass html code into components, the importance of data binding for interacting with templates and business logic, and the methods of data binding including string interpolation, property binding, and event binding.', 'duration': 380.24, 'highlights': ['The chapter discusses the use of ng-content to pass HTML code into components ng-content allows for the rendering of all the content being passed between the opening and closing tag inside of a component, enabling the creation of reusable containers that embed other HTML code. It is a good way to create reusable containers which take other HTML code and embed that inside of them.', 'Importance of data binding for interacting with templates and business logic Data binding means communication between the component body, the logic, the class, the TypeScript code, and the component template, the view which the user sees. It allows for passing data to the template and listening to events in the DOM, enabling interaction between templates and business logic.', 'Methods of data binding including string interpolation, property binding, and event binding The methods of data binding in Angular 2 include string interpolation, property binding, and event binding. String interpolation uses double curly braces and an expression that resolves to a string, property binding involves sending data to properties in the HTML code, and event binding allows for listening to events emitted from an element and executing expressions when these events occur.']}], 'duration': 1484.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg2694967.jpg', 'highlights': ['Methods of data binding including string interpolation, property binding, and event binding. (Paragraph 4)', 'The chapter covers transforming a default TypeScript class into an Angular 2 component, using the ng generate command to create a new component. (Paragraph 1)', 'The concept of view encapsulation in Angular 2 is explained, including the emulation of shadow DOM and its functionality. (Paragraph 3)', 'The chapter demonstrates how to nest components and create sibling components in Angular 2. (Paragraph 3)', "Using the ng generate command, a new component named 'other' is created, which automatically sets the selector to 'FA-other' due to the prefix flag set in Angular CLI. (Paragraph 1)", 'Importance of data binding for interacting with templates and business logic. (Paragraph 4)', 'The ability to use multiple components in the same template is demonstrated. (Paragraph 3)', 'Organizing and importing components using barrels in Angular 2 applications is a good practice, leading to shorter import statements, code savings, and improved readability. (Paragraph 2)', 'Emphasizing the significance of following best practices for organizing and importing components in Angular 2 applications. (Paragraph 2)', 'The importance of unique selectors is emphasized to prevent interference with default HTML tags or third-party libraries. (Paragraph 1)']}, {'end': 5004.177, 'segs': [{'end': 4217.385, 'src': 'embed', 'start': 4180.97, 'weight': 4, 'content': [{'end': 4183.111, 'text': 'The last thing is two-way data binding.', 'start': 4180.97, 'duration': 2.141}, {'end': 4192.474, 'text': 'And two-way data binding, of course, was one of the most important things for Angular 1, which made Angular 2 so very, very successful and popular.', 'start': 4183.211, 'duration': 9.263}, {'end': 4197.996, 'text': "Angular 2, by default, doesn't have two-way data binding.", 'start': 4193.434, 'duration': 4.562}, {'end': 4207.919, 'text': 'By default, all data flow is unidirectional, which allows it to run it so fast and circumvent some problems.', 'start': 4198.676, 'duration': 9.243}, {'end': 4217.385, 'text': "nonetheless, if you need two-way data binding, it's still there and the syntax is the one you see here squared brackets,", 'start': 4208.8, 'duration': 8.585}], 'summary': "Angular 2's unidirectional data flow enabled speed and success, while still supporting two-way binding.", 'duration': 36.415, 'max_score': 4180.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg4180970.jpg'}, {'end': 4485.821, 'src': 'embed', 'start': 4453.398, 'weight': 0, 'content': [{'end': 4461.765, 'text': 'this property is a string and then simply renders it once this component is loaded and rendered to the user.', 'start': 4453.398, 'duration': 8.367}, {'end': 4473.495, 'text': 'Now, how does this work if I use the number interpolation? Does this work? Because that is no string, right? Number interpolation.', 'start': 4462.786, 'duration': 10.709}, {'end': 4474.936, 'text': 'Save this.', 'start': 4474.436, 'duration': 0.5}, {'end': 4485.821, 'text': 'Well, it still works as you can see because a number can easily be cast to a string and TypeScript or Angular 2 does that for us.', 'start': 4477.197, 'duration': 8.624}], 'summary': 'Number interpolation in typescript and angular 2 works by casting numbers to strings.', 'duration': 32.423, 'max_score': 4453.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg4453398.jpg'}, {'end': 4610.397, 'src': 'embed', 'start': 4582.73, 'weight': 5, 'content': [{'end': 4592.88, 'text': 'Now the next thing is kind of the same since components are directives but to still differentiate it here you can also bind to component properties.', 'start': 4582.73, 'duration': 10.15}, {'end': 4604.312, 'text': 'So properties set up in the class, in the body of your class, of your component class can be bound or can be events,', 'start': 4594.224, 'duration': 10.088}, {'end': 4607.154, 'text': 'can emit events you can listen to from outside.', 'start': 4604.312, 'duration': 2.842}, {'end': 4610.397, 'text': 'So these are the three availabilities you have.', 'start': 4607.995, 'duration': 2.402}], 'summary': 'Components can bind to properties, set up in the class, and emit events for outside listening.', 'duration': 27.667, 'max_score': 4582.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg4582730.jpg'}], 'start': 4180.97, 'title': 'Angular 2 data binding', 'summary': 'Covers string interpolation, property binding, and event binding in angular 2, highlighting the availabilities for binding and providing syntax explanations and examples. it also discusses the retention of two-way data binding from angular 1 using ngmodel, enabling bidirectional data flow and fast execution.', 'chapters': [{'end': 4288.018, 'start': 4180.97, 'title': 'Angular 2 two-way data binding', 'summary': 'Explains how two-way data binding, a key feature of angular 1, is still available in angular 2 using ngmodel, enabling property and event binding in one, facilitating bidirectional data flow and fast execution.', 'duration': 107.048, 'highlights': ['Two-way data binding in Angular 2 is facilitated by ngModel, combining property and event binding for bidirectional data flow. The chapter discusses the availability of two-way data binding in Angular 2 using ngModel, which combines property and event binding, allowing bidirectional data flow.', 'Default unidirectional data flow in Angular 2 enables fast execution and circumvents certain problems. By default, Angular 2 employs unidirectional data flow, resulting in fast execution and overcoming specific issues.', 'The syntax for two-way data binding in Angular 2 involves using squared brackets and parentheses around ngModel. The syntax for implementing two-way data binding in Angular 2 requires the use of squared brackets and parentheses around ngModel.']}, {'end': 5004.177, 'start': 4293.742, 'title': 'Angular 2 data binding', 'summary': 'Covers string interpolation, property binding, and event binding in angular 2, demonstrating how to use them with examples and explanations of the three availabilities for binding. it also explains the syntax for property and event binding and provides examples for each.', 'duration': 710.435, 'highlights': ['The chapter covers string interpolation, property binding, and event binding in Angular 2 The chapter delves into the concepts of string interpolation, property binding, and event binding in Angular 2, providing a comprehensive understanding of these essential data binding techniques.', 'Examples and explanations of the three availabilities for binding The chapter explains the three availabilities for binding, including native properties and events, directive properties and events, and component properties and events, offering insights into each type of binding.', 'Demonstrates syntax for property and event binding The chapter provides a detailed demonstration of the syntax for property and event binding in Angular 2, illustrating how to use the add input metadata for property binding and add output event name for event binding.', 'Examples of using string interpolation, property binding, and event binding with practical demonstrations The chapter showcases practical examples of using string interpolation, property binding, and event binding, offering clear demonstrations to enhance understanding and application of these concepts.']}], 'duration': 823.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg4180970.jpg', 'highlights': ['The chapter covers string interpolation, property binding, and event binding in Angular 2', 'Two-way data binding in Angular 2 is facilitated by ngModel, combining property and event binding for bidirectional data flow', 'Default unidirectional data flow in Angular 2 enables fast execution and circumvents certain problems', 'The syntax for two-way data binding in Angular 2 involves using squared brackets and parentheses around ngModel', 'Examples and explanations of the three availabilities for binding', 'Demonstrates syntax for property and event binding', 'Examples of using string interpolation, property binding, and event binding with practical demonstrations']}, {'end': 6169.546, 'segs': [{'end': 5376.875, 'src': 'embed', 'start': 5345.182, 'weight': 3, 'content': [{'end': 5348.883, 'text': 'And then result is of the name of the property I want to bind to.', 'start': 5345.182, 'duration': 3.701}, {'end': 5352.963, 'text': "I'll set result to 10.", 'start': 5350.003, 'duration': 2.96}, {'end': 5359.845, 'text': "And now if this reloads, you see that we get 10 here because we're now binding to the property from outside.", 'start': 5352.963, 'duration': 6.882}, {'end': 5365.286, 'text': "We're passing the data which should be shown there from outside into that component.", 'start': 5359.885, 'duration': 5.401}, {'end': 5373.673, 'text': "So you'll learn quite a lot about property binding.", 'start': 5371.132, 'duration': 2.541}, {'end': 5376.875, 'text': 'Time to move on to the next step, event binding.', 'start': 5374.334, 'duration': 2.541}], 'summary': 'Property binding set to 10, passing data into component, learning about property binding.', 'duration': 31.693, 'max_score': 5345.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg5345182.jpg'}, {'end': 5593.438, 'src': 'embed', 'start': 5567.983, 'weight': 1, 'content': [{'end': 5578.369, 'text': "So what I want to do now is here when I'm clicking on it, I'm actually using my clicked event here, my clicked property, and I call the emit method.", 'start': 5567.983, 'duration': 10.386}, {'end': 5582.247, 'text': 'And I will emit some text.', 'start': 5580.054, 'duration': 2.193}, {'end': 5583.153, 'text': 'It works.', 'start': 5582.65, 'duration': 0.503}, {'end': 5585.855, 'text': 'Therefore, this is a generic type.', 'start': 5584.275, 'duration': 1.58}, {'end': 5588.236, 'text': "I'll make this of type string.", 'start': 5586.496, 'duration': 1.74}, {'end': 5590.157, 'text': 'It will work without that too.', 'start': 5588.596, 'duration': 1.561}, {'end': 5593.438, 'text': "And if you're not aware what generic types is, don't worry about this.", 'start': 5590.217, 'duration': 3.221}], 'summary': 'Using clicked event to emit text, making it a generic type string.', 'duration': 25.455, 'max_score': 5567.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg5567983.jpg'}, {'end': 5923.164, 'src': 'embed', 'start': 5868.183, 'weight': 0, 'content': [{'end': 5875.227, 'text': 'have as strings all the different names or property names you want to use.', 'start': 5868.183, 'duration': 7.044}, {'end': 5883.424, 'text': 'So for example you might want to use result here and this would allow you to get rid of the add input.', 'start': 5876.457, 'duration': 6.967}, {'end': 5890.511, 'text': "Now this would still be set as an input but you don't have the decorator here and of course you also don't have to import it from here then.", 'start': 5884.645, 'duration': 5.866}, {'end': 5893.975, 'text': 'This should be inputs here by the way.', 'start': 5892.453, 'duration': 1.522}, {'end': 5902.177, 'text': "As you can already see, I'm getting this underlined and I get an error by TSLint telling me that this is a bad practice and I should use add input.", 'start': 5894.611, 'duration': 7.566}, {'end': 5904.219, 'text': 'The same would be true for outputs.', 'start': 5902.518, 'duration': 1.701}, {'end': 5914.948, 'text': "So while you might do this and you can, it's a better practice to, well, revert this and use the add input decorator here like before.", 'start': 5904.759, 'duration': 10.189}, {'end': 5923.164, 'text': 'communicate with each other, transfer data, listen to events and so on.', 'start': 5918.362, 'duration': 4.802}], 'summary': 'Using add input and add output decorators is recommended to avoid errors and bad practices in the code.', 'duration': 54.981, 'max_score': 5868.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg5868183.jpg'}], 'start': 5005.546, 'title': 'Angularjs styling and data binding', 'summary': 'Covers using ng-class and ng-style for dynamic styling in angularjs, property and event binding with examples, and best practices for input and output binding, including two-way data binding in angular 2.', 'chapters': [{'end': 5087.516, 'start': 5005.546, 'title': 'Ng-class and ng-style in angularjs', 'summary': 'Explains how to use ng-class and ng-style in angularjs for dynamic styling, including examples of method calls and style definitions resulting in text color changes.', 'duration': 81.97, 'highlights': ['You can use ng-class and ng-style in AngularJS for dynamic styling, such as applying a red border to an element based on a method call that returns true, or changing the text color using ng-style by defining the color as green or blue.', 'The chapter demonstrates how to write multi-line code in AngularJS, allowing for the execution of normal JavaScript code, such as method calls resulting in an object with a key-value pair determining the styling of an element.']}, {'end': 5618.746, 'start': 5089.585, 'title': 'Angular property and event binding', 'summary': 'Explains property binding with examples, including creating a new component, setting property values from outside, and binding properties in the html template, and then delves into event binding, involving creating a new component, adding event listeners to buttons, and emitting custom events for event binding.', 'duration': 529.161, 'highlights': ['The chapter explains property binding with examples, including creating a new component, setting property values from outside, and binding properties in the HTML template. The chapter covers creating a new component, setting property values from outside, and binding properties in the HTML template, providing a clear understanding of property binding.', 'The chapter delves into event binding, involving creating a new component, adding event listeners to buttons, and emitting custom events for event binding. The chapter provides insights into event binding, including creating a new component, adding event listeners to buttons, and emitting custom events for event binding.']}, {'end': 6169.546, 'start': 5619.786, 'title': 'Angular 2 data binding', 'summary': 'Covers setting up custom events and listening to them in a parent component, best practices for input and output binding, and a demonstration of two-way data binding in angular 2.', 'duration': 549.76, 'highlights': ['Setting up custom events and listening to them in a parent component Demonstrates how to emit custom events, listen to them in a parent component, and pass data using Angular 2, showcasing the capability of components to communicate effectively.', 'Best practices for input and output binding Explains the best practices for input and output binding, emphasizes using internal property names as the external ones, and discusses the syntax for event binding.', 'Demonstration of two-way data binding in Angular 2 Illustrates the concept of two-way data binding in Angular 2, showing how changes in one input field are reflected in another, and vice versa, providing a comprehensive understanding of this data binding approach.']}], 'duration': 1164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DBjPIabiRNg/pics/DBjPIabiRNg5005546.jpg', 'highlights': ['Demonstration of two-way data binding in Angular 2, reflecting changes bidirectionally', 'Best practices for input and output binding, emphasizing internal property names', 'Setting up custom events and listening to them in a parent component', 'Event binding insights, including creating a new component and emitting custom events', 'Property binding explanation with examples, creating a new component and setting values']}], 'highlights': ['The video contains lectures of the first two modules of a five-star rated Udemy course on Angular 2, focusing on setting up Angular 2 application with the Angular 2 CLI and creating components with data binding.', 'By the end of the video, viewers will be able to create their first Angular 2 applications and understand the process.', 'Angular 2 reduces server requests by asynchronously handling responses and incorporating new data without requiring full page reloads, ultimately saving time and improving user experience.', 'Single-page applications handle user requests and re-render HTML pages through JavaScript, reducing the need for server interactions, leading to faster performance and a more app-like experience in the browser.', "The project structure includes 'dist' for compiled code and 'source' for application code, written in TypeScript and compiled to JavaScript for browser compatibility.", 'The creation of new components allows for dynamic content in the HTML file, with the ability to live update changes in the browser.', "The 'dist' folder contains the built app, triggering live reload of the browser.", 'TypeScript offers strong typing, preventing errors and providing an extra level of security by checking types, which is one of its biggest benefits.', "Using TypeScript allows for the utilization of next generation JavaScript features, such as classes and modular multi-file approach, transpiling them into today's JavaScript.", 'Methods of data binding including string interpolation, property binding, and event binding.', 'Two-way data binding in Angular 2 is facilitated by ngModel, combining property and event binding for bidirectional data flow', 'Default unidirectional data flow in Angular 2 enables fast execution and circumvents certain problems', 'Demonstration of two-way data binding in Angular 2, reflecting changes bidirectionally', 'Best practices for input and output binding, emphasizing internal property names', 'Setting up custom events and listening to them in a parent component', 'Event binding insights, including creating a new component and emitting custom events', 'Property binding explanation with examples, creating a new component and setting values']}