Angular 11: Introduction to Components

Angular    |    Beginner
  • 11 videos | 34m 21s
  • Includes Assessment
  • Earns a Badge
Rating 4.6 of 265 users Rating 4.6 of 265 users (265)
Angular is a commonly-used language among experienced developers moving into full stack development. Through templating, two-way binding, modularization, RESTful API handling, dependency injection, and AJAX handling, Angular provides the tools needed to build interactive and dynamic single-page applications. This course elevates a basic working knowledge of Angular by guiding you on some more advanced practices. Learn to create classes in TypeScript and add properties and functions to TypeScript classes. Define decorators in JavaScript and create a simple Angular component. Add templates, styles, and styleUrls to Angular components. Furthermore, investigate binding data with interpolation and ng-bind. After taking this course, you'll be able to use components in Angular to make the most of this dynamic web framework.


  • Discover the key concepts covered in this course
    Define object-oriented programming concepts and outline how to create classes in typescript and convert typescript classes to functions
    Describe how to add private and public properties to a typescript class and explain the use of public properties outside the class
    Describe how to add functions to a typescript class and explain how to access public property in a class function
    Describe the concept of decorators in typescript and how to add decorators to functions, class variables, and classes
    Create a component using the angular cli, add the component to a module, and add inline html to the component
  • Add a multi-line template to an angular component and an external template to a react component
    Add inline styles to an angular component template and use style tags to add inline styles
    Add external style and multiple style files to angular components
    Describe what's meant by binding state variables with interpolation, calling functions and mathematical expressions inside interpolation, the use of "ng-bind" for interpolating data, and the use of ng-bind with different html elements
    Summarize the key concepts covered in this course


  • 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
  • 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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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
  • Locked
    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


Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.


Rating 4.5 of 73 users Rating 4.5 of 73 users (73)
Rating 4.4 of 134 users Rating 4.4 of 134 users (134)
Rating 3.0 of 1 users Rating 3.0 of 1 users (1)


Rating 4.4 of 69 users Rating 4.4 of 69 users (69)
Rating 4.5 of 86 users Rating 4.5 of 86 users (86)
Rating 4.2 of 117 users Rating 4.2 of 117 users (117)