filmov
tv
Angular 2 Components
Показать описание
Text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
Slides
Angular 2 Tutorial playlist
Angular 2 Text articles and slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In this video tutorial we will discuss - What is a component in Angular 2
In Part 1 of Angular 2 tutorial, we discussed that everything in Angular 2 is a component i.e components are the basic building blocks of an Angular application.
What is a component in Angular 2
A component in Angular is a class with a template and a decorator. So in simple terms a component in Angular is composed of these 3 things
1. Template - Defines the user interface. Contains the HTML, directives and bindings.
2. Class - Contains the code required for template. Just like a class in any object oriented programming language like C# or Java, a class in angular can contain methods and properties. Properties contain the data that we want to display in the view template and methods contain the logic for the view. We use TypeScript to create the class.
3. Decorator - We use the Component decorator provided by Angular to add metadata to the class. A class becomes an Angular component, when it is decorated with the Component decorator.
// Component decorator is provided by the Angular core library, so we
// have to import it before using it. The import keyword is similar to
// using keyword in C#. Any exported member can be imported using import
// keyowrd.
// The class is decorated with Component decorator which adds metadata
// to the class. We use the @ symbol to apply a decorator to the class
// Applying a decorator on a class is similar to applying an attribute
// to a class in C# or other programming languages. Component is just
// one of the deveral built-in decorators provided by angular. We will
// discuss the other decorators provided by angular in upcoming videos
@Component({
// component has several properties. Here we are using just 2. For
// the full list of properties refer to the following URL
// To use this component on any HTML page we specify the selector
// This selector becomes the directive [my-app] on the HTML page
// At run time, the directive [my-app] is replaced by the template
// HTML specified below
selector: 'my-app',
// The template contains the HTML to render. Notice in the HTML
// we have a data-binding expression specified by double curly
// braces. We have a defualt value "Angular" assigned to "name"
// property in the AppComponent class. This will be used at runtime
// inplace of the data-binding expression
template: `[h1]Hello {{name}}[/h1]`,
})
// export keyword allows this class to be exported, so other components
// in the application can import and use it if required
export class AppComponent {
// name is a property and the data type is string and
// has a default value "angular"
name: string = 'Angular';
}
[my-app]Loading AppComponent content here ...[/my-app]
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
Slides
Angular 2 Tutorial playlist
Angular 2 Text articles and slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In this video tutorial we will discuss - What is a component in Angular 2
In Part 1 of Angular 2 tutorial, we discussed that everything in Angular 2 is a component i.e components are the basic building blocks of an Angular application.
What is a component in Angular 2
A component in Angular is a class with a template and a decorator. So in simple terms a component in Angular is composed of these 3 things
1. Template - Defines the user interface. Contains the HTML, directives and bindings.
2. Class - Contains the code required for template. Just like a class in any object oriented programming language like C# or Java, a class in angular can contain methods and properties. Properties contain the data that we want to display in the view template and methods contain the logic for the view. We use TypeScript to create the class.
3. Decorator - We use the Component decorator provided by Angular to add metadata to the class. A class becomes an Angular component, when it is decorated with the Component decorator.
// Component decorator is provided by the Angular core library, so we
// have to import it before using it. The import keyword is similar to
// using keyword in C#. Any exported member can be imported using import
// keyowrd.
// The class is decorated with Component decorator which adds metadata
// to the class. We use the @ symbol to apply a decorator to the class
// Applying a decorator on a class is similar to applying an attribute
// to a class in C# or other programming languages. Component is just
// one of the deveral built-in decorators provided by angular. We will
// discuss the other decorators provided by angular in upcoming videos
@Component({
// component has several properties. Here we are using just 2. For
// the full list of properties refer to the following URL
// To use this component on any HTML page we specify the selector
// This selector becomes the directive [my-app] on the HTML page
// At run time, the directive [my-app] is replaced by the template
// HTML specified below
selector: 'my-app',
// The template contains the HTML to render. Notice in the HTML
// we have a data-binding expression specified by double curly
// braces. We have a defualt value "Angular" assigned to "name"
// property in the AppComponent class. This will be used at runtime
// inplace of the data-binding expression
template: `[h1]Hello {{name}}[/h1]`,
})
// export keyword allows this class to be exported, so other components
// in the application can import and use it if required
export class AppComponent {
// name is a property and the data type is string and
// has a default value "angular"
name: string = 'Angular';
}
[my-app]Loading AppComponent content here ...[/my-app]
0:09:17
Angular 2 Components
0:12:04
Understanding Angular 2 Components
0:06:41
Angular 2 Components | Angular 2 Training | Tutorialspoint
0:13:00
Angular 2 nested components
0:06:27
Angular 2 Tutorial #7 - Creating a Component
0:04:37
How to share Angular Components? (Simple steps)
0:08:02
Angular 2 for Beginners - Tutorial 3 - Components
0:10:01
Angular 2 Tutorial #5 - Components
4:33:56
AngularJS 2 Full Course | ZaranTech
0:05:19
Sharing Data between Components in Angular
0:56:57
Tutorial: An Introduction to Angular 2 Components
0:12:50
Angular 2 Tutorial [3] - Components and Data Binding
0:13:52
Angular Components Beginner's Guide
0:06:45
Angular 2 for Beginners - Tutorial 7 - Nested Components
0:04:18
How to Add Multiple Components on Same Page in Angular (with Example) | Angular 14 Tutorial
0:08:00
Angular 2 Tutorial 8: Multiple Components
0:05:21
Angular 2 Tutorial #8 - Nesting Components
0:11:18
Styling angular 2 components
0:21:13
MEAN Stack Front To Back [Part 5] - Angular 2 Components & Routes
1:42:58
Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, Components, Databinding
0:06:40
Angular 2 Nested Components | Angular 2 Training | Tutorialspoint
0:03:27
💥 Angular Components Tutorial For Beginners - Styling Components - Learn Component Style Isolation...
0:17:56
Angular 2 Tutorial - WTF are Components, Directives and Dataflow?
0:06:49
Angular 2 Tutorial - 5 - Understanding Hello World and Components
Комментарии