Angular 8 Crash Course II

ANGULAR 8 CRASH COURSE II
ng-template
home.component.html:
<div class="play-container">
<ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
<p>The click counter <strong>IS GREATER</strong> than 4.</p>
</ng-template>
<ng-template #none>
<p>The click counter is <strong>not greater</strong> than 4.</p>
</ng-template>
</div>
Modify the last play-container class in our HTML like so:

<div class="play-container" [style.background-color]="clickCounter > 4 ? 'yellow' : 'lightgray'">
multiple CSS properties?

<div class="play-container" [ngStyle]="{
'background-color': clickCounter > 4 ? 'yellow' : 'lightgray',
'border': clickCounter > 4 ? '4px solid black' : 'none'}
">
Note: You can specify [ngStyle]="someObject" instead, if you wish to specify that logic in the component instead of the template.
Class Binding
<div class="play-container" [class.active]="clickCounter > 4">
home.component.scss
.active {
background-color: yellow;
border: 4px solid black;
}
We can also set multiple classes with ngClass.

<div class="play-container" [ngClass]="setClasses()">
Let's visit the component file and add the following:

setClasses() {
let myClasses = {
active: this.clickCounter > 4,
notactive: this.clickCounter <= 4
};
return myClasses;
}
In the component's CSS file:

.notactive {
background-color: lightgray;
}
Services
Let's generate the service with the Angular CLI:
ng g s http
The name we're giving this service is "http". Let's visit the new service file located at /src/app/http.service.ts:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HttpService {
constructor() { }
}
It looks similar to a component, except the import is an Injectable instead of a Component, and the decator is based on this
@Injectable. Let's create a custom method that other components can access:
constructor() { }
myMethod() {
return console.log('Hey, what is up!');
}
}
Next, in /src/list/list.component.ts:
export class ListComponent implements OnInit {
constructor(private _http: HttpService) { }
ngOnInit() {
this._http.myMethod();
}
}
Angular HTTP Client

We need to integrate the HTTP client within our http service, which will allow us to communicate with a public API.
http.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
constructor(private http: HttpClient) { }
getBeer() {
return this.http.get('https://api.openbrewerydb.org/breweries')
}
}
First, we import the HttpClient, then we create an instance of it through dependency injection, and then we create a method that
returns the response from the API. Simple! We have to import the HttpClientModule in our /src/app/app.module.ts file:
import { HttpClientModule } from '@angular/common/http'; // Add this
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule // Add here
],
Next, open up the list.component.ts file and add the following:

export class ListComponent implements OnInit {
brews: Object;
constructor(private _http: HttpService) { }
ngOnInit() {
this._http.getBeer().subscribe(data => {
this.brews = data
console.log(this.brews);
}
);
}
}
The service returns an observable, which means we can subscribe to it within the component. In the return, we can pass the data
to our brews object. Next, visit the list template file and add the following:
<h1>Breweries</h1>
<ul *ngIf="brews">
<li *ngFor="let brew of brews">
<p class="name">{{ brew.name }}</p>
<p class="country">{{ brew.country }}</p>
<a class="site" href="{{ brew.website_url }}">site</a>
</li>
</ul>
First, we add an *ngIf to only show the UL element if brews exists. Then, we iterate through the array of objects with *ngFor.
After that, it's a simple matter of iterating through the results with interpolation! Let's style this with CSS real quickly in this
component's .scss file:
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
li {
background: rgb(238, 238, 238);
padding: 1em;
margin-right: 10px;
width: 20%;
height: 200px;
margin-bottom: 1em;
display: flex;
flex-direction: column;
p{
margin: 0;
}
p.name {
font-weight: bold;
font-size: 1.2rem;
}
p.country {
text-transform: uppercase;
font-size: .9rem;
flex-grow: 1;
}
}
}
And here's the result!

Deployment
ng build --prod
This will create a /dist folder. We can even run it locally with something like lite-server. To install lite-server:
> npm i -g lite-server
Hop into the folder: myapp\dist\myapp\ and run:

> lite-server
This will launch the production build in the browser!

Angular 8 Crash Course II

Uploaded by

Copyright:

Available Formats

Angular 8 Crash Course II

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular 8 Crash Course II

Uploaded by

Copyright:

Available Formats

ANGULAR 8 CRASH COURSE II

Modify the last play-container class in our HTML like so:

multiple CSS properties?

We can also set multiple classes with ngClass.

Let's visit the component file and add the following:

In the component's CSS file:

Angular HTTP Client

Next, open up the list.component.ts file and add the following:

constructor(private _http: HttpService) { }

And here's the result!

Hop into the folder: myapp\dist\myapp\ and run:

This will launch the production build in the browser!

You might also like