In this tutorial we’ll discuss property binding, one of the most important concept of Angular. Property binding allows to set value of property of HTML elements and directives. In property binding, movement of data is from component’s property to target element property. Property binding syntax To understand the property binding syntax, let us first see…

Interpolation according to dictionary means “to insert (words) into a text or into a conversation” or “to insert between other things or parts”. In Angular, text interpolation allows you to dynamically insert string value in HTML template. HTML template represents the view of a component. Using text interpolation, we can dynamically show string values like…

In this article, we’ll discuss template in Angular. What is a template in Angular? A template contains the presentation of a component. That is, how a component looks or rendered in browser is defined in a template. Angular template is regular HTML code to which Angular constructs can be added for extra features. Angular template…

In this article, we’ll see how to declare inline styles for a component. We can declare styles for a component in two ways: By referencing an external file. For example, in the following code, external file (app.component.css) is referenced using styleUrls property. By declaring inline styles, by using styles property. Inline styles are declared within…

In this article, we’ll see how to define an inline template associated with a component. A component is always associated with a component. We usually keep the code of template in an external file and associate that component with templateUrl property of the @Component decorator, like in the following piece of code: If the template…

In this article, we’ll learn what a component is, in Angular. We’ll create our own component and see how to use it. What is a component? Components are the main building block of Angular applications. It is the component where the logic of the application is written. An Angular application is usually made up of…

In this article, we’ll discuss Angular workspace and project file structure. The workspace and project structure which we’ll discuss will be created when we run ng new <my-project-name>. What is Angular workspace? An Angular workspace is a collection of Angular projects typically co-located in a single directory. Here, Angular project could be an application or…

In this tutorial, we’ll learn about one of the most popular framework for creating single page application. We’ll learn what we need to have to get started with Angular and will also create our first application. What is Angular? According to the official documentation, Angular is an application design framework and development platform for creating…