Angular 11: Introduction to Components

IN THIS COURSE

• 1.  Course Overview
  1m 9s
  In this video, you’ll learn more about your instructor and the course. In this course, you’ll learn about the components that make up Angular. You’ll learn about TypeScript classes and decorators. You’ll learn how to add templates to Angular components. You’ll also learn about styles and data binding. FREE ACCESS
• 2.  Creating Classes in TypeScript
  3m 15s
  In this video, you’ll learn more about TypeScript classes. TypeScript is used to create a blueprint for creating objects. TypeScript inherits this feature from ES6 class functionality. In other words, ECMAScript 6 gives you the ability to take JavaScript and turn it into a class. It also provides you with the ability to add classes to JavaScript code. Classes are fundamental entities, used to create reusable objects. FREE ACCESS
• 3.  Adding Properties to TypeScript Classes
  2m 13s
  In this video, you’ll learn more about properties. The properties inside of your TypeScript classes are the things that hold values. Properties can be added to classes just like in other object-oriented programming languages. They store the values of those classes. Access modifiers can be added to the TypeScript properties. You can make some of the TypeScript properties in your class accessible to any other class and you can make others private. FREE ACCESS
• 4.  Adding Functions in TypeScript Classes
  2m 16s
  In this video, you’ll learn more about functions in your TypeScript classes. Functions are also known as methods. They do the part of your class. Functions can be added to your TypeScript classes, just like any other object-oriented programming language, and functions actually use the properties of the class to do their jobs. Functions need properties to complete functionality. Access modifiers can be added to functions. FREE ACCESS
• 5.  Defining Decorators in TypeScript
  2m 17s
  In this video, you’ll learn more about decorators in JavaScript. You’ll learn a decorator is a function that can be used to work or modify other variables, other functions, or the entire class. The concept of a decorator was introduced with ES6, or the ECMAScript 6. A decorator is a piece of code that wraps up another piece of code, decorating it. A decorator is a way to modify a class or a property. FREE ACCESS
• 6.  Creating a Simple Angular Component
  5m 24s
  In this video, you’ll watch a demo. In this demonstration, you’ll learn how to install or create a new component for your boilerplate application. Previously, you created a boilerplate application using ng new and named the application Skills. Now, you’ll add a new component to that application using the CLI. First, you’ll click on the File icon, which gives you access to the File system. Then, you’ll choose Documents. FREE ACCESS
• 7.  Adding Templates to Angular Components
  4m 7s
  In this video, you’ll watch a demo. In this demonstration, you’ll learn about templated strings and using templates in your components. You’ll use a component called Home and the command ng generate component. You’ll see the command also inserted all of your code into the files onscreen. You’ll use the HTML file. Onscreen, you’ll see, between the paragraph tags, a template. This is a physical HTML file that contains the template. FREE ACCESS
• 8.  Working with Styles in Angular Components
  4m 52s
  In this video, you’ll watch a demo. In this demonstration, you’ll learn how to use inline styles instead of a physical CSS file. Onscreen, you’ll see the Visual Studio Code Editor. It’s pointed to the home.component.ts file. You’ll look at this TS file. Within this TS file, take a look at line number 6. This line has a name value pair inside of its configuration object. You’ll see it’s pointing to a physical CSS file. FREE ACCESS
• 9.  Adding styleUrls to Angular Components
  3m 45s
  In this video, you’ll watch a demo. Here, you’ll work with the boilerplate application onscreen. You’ll learn how to work with the CSS file. Onscreen, you’ll see Visual Studio Code Editor. It’s open to the home.component.ts file. The component.ts file is like the main file of your component. Line number 6 of your home.component.ts file is pointing to the location of your CSS file. It’s a name value pair within the @Component config file. FREE ACCESS
• 10.  Data Binding in Angular
  3m 33s
  In this video, you’ll watch a demo. You’ll learn more about data binding in Angular. This is the process of connecting or synchronizing data with UI elements. This is also the way you would connect your class, the properties and the functions of that class, with the DOM. It helps the user manipulate the elements on your website. It defines the interaction between the DOM and your components. It allows one-way and two-way binding. FREE ACCESS
• 11.  Course Summary
  1m 28s
  In this video, you’ll summarize what you’ve learned in this course. In the course, you learned the components of Angular. You learned how to create classes in TypeScript, and saw that classes are no different from any other programming language. You added properties and functions to those classes and even had decorators in JavaScript. You also added templates and styles to Angular components. You then finished the course by learning about binding data. FREE ACCESS