Learn Angular.js

Wanna learn some dangular Angular? You've come to the right place. This content is adopted from Angular 8 Crash Course by Gary Simon. Ready to get started? I bet you are!

Here are some cool things you can do with Angular.js 😎

One Way Binding:

Clickable Span

We wrapped the word this in a span tag featuring a click event listener. This is initially displayed as 0, but increments with each click We are able to show the current count by using interpolation. Enclosing our desired property in double-curly braces displays the property defined as it is defined in the component located in home.component.ts.

Two-way binding:

When we type something in the input box, you see it displayed down below. We use ngModel to bind our data from the form to the page.

Ng-template

Now we can add some new functionality with ng-template. This allows us to build conditional content directly into the page. There are a few different ways you can use this in your code, but we're going to use [ngIf] and [ngIfElse] for our conditions.

We can give the [ngIfElse] condition the name "none". Then create a separate ng-template section with our desired content. In our example, this will display "not greater than 4" until the condition is met. Then, the text will change.

Style Binding

Simple logic directly in HTML tag

In the below div, we can display different CSS by placing a conditional statement directly into the tag. All we have to do is add [class.active]="clickCounter > 4" inside the div tag.

Combining Ng-template and Style Mods

We can take that same code and add css style changes to reflect the condition. For this example, we'll add [style.background-color]="clickCounter > 4 ? 'red' : 'lightgray'" to our div tag.

If you have never seen code like this before, that is called a ternary operator. Think of it like an inline if/else condition.

Changling Multiple Style Elements with ngStyle

We can use ngStyle to modify multiple inline css elements.

We insert the following code into our div:
[ngStyle]="{
'background-color' : clickCounter > 4 ? 'yellow' : 'lightgray',
'border': clickCounter > 4 ? '4px solid black' : 'none'
}"

Changling Multiple Style Elements with ngClass

We can add a function to our component logic file and call it with [ngClass]="setClasses()"