Commit 6e692c3c authored by Phillip Couto's avatar Phillip Couto 🔨
Browse files

Built out the examples

parent d384eb4f
Pipeline #11515 passed with stages
in 3 minutes and 50 seconds
image: node
cache:
paths:
- node_modules
build:
stage: build
script:
- yarn
- yarn ng build
test:
stage: test
script:
- yarn
- yarn ng lint
\ No newline at end of file
......@@ -91,6 +91,24 @@ elements that are easily referenced in templates as well as code files.
ng generate pipe new-pipe-name
```
### Directives
Directives are another Angular concept that allows for control of what is rendered
by modifying the components or elements the directive is attached to. Directives
are usually defined as attributes on an element in a template. There are two types
of directives:
- Attribute directives
- Structural directives
The most common directives developers will interact with are structure directives
as these provide the functionality to conditionally include or exclude portions
of the user interface as well as render a collection of values using a template
without needing to create a new component.
Common structural directives are `*ngIf`, `*ngFor`, and `[ngSwitch]`. The Angular
team has provided extension documentation on this topic. [Angular - Structural Directives](https://angular.io/guide/structural-directives)
### Dependency Injection
Dependency Injection has been a main feature of both AngularJS and Angular. This
......
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ExampleComponentComponent } from './components-example/example-component/example-component.component';
import { UseDirectivesComponent } from './directives-example/use-directives/use-directives.component';
import { UsePipesComponent } from './pipes-example/use-pipes/use-pipes.component';
import { UseServiceComponent } from './services-example/use-service/use-service.component';
const routes: Routes = [];
const routes: Routes = [
{path: '', redirectTo: 'components', pathMatch: 'full'},
{path: 'components', component: ExampleComponentComponent},
{path: 'services', component: UseServiceComponent},
{path: 'pipes', component: UsePipesComponent},
{path: 'directives', component: UseDirectivesComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
......
<p>{{title}} works!</p>
\ No newline at end of file
<div>
<ul>
<li><a routerLink="components">Components</a></li>
<li><a routerLink="services">Services</a></li>
<li><a routerLink="pipes">Pipes</a></li>
<li><a routerLink="directives">Directives</a></li>
</ul>
</div>
<router-outlet></router-outlet>
\ No newline at end of file
......@@ -3,6 +3,10 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsExampleModule } from './components-example/components-example.module';
import { ServicesExampleModule } from './services-example/services-example.module';
import { PipesExampleModule } from './pipes-example/pipes-example.module';
import { DirectivesExampleModule } from './directives-example/directives-example.module';
@NgModule({
declarations: [
......@@ -10,6 +14,10 @@ import { AppComponent } from './app.component';
],
imports: [
BrowserModule,
ComponentsExampleModule,
ServicesExampleModule,
PipesExampleModule,
DirectivesExampleModule,
AppRoutingModule
],
providers: [],
......
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponentComponent } from './example-component/example-component.component';
@NgModule({
declarations: [ExampleComponentComponent],
imports: [
CommonModule,
],
exports: [ExampleComponentComponent]
})
export class ComponentsExampleModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example-component',
templateUrl: './example-component.component.html',
styleUrls: ['./example-component.component.scss']
})
export class ExampleComponentComponent implements OnInit {
title = 'Example component';
constructor() { }
ngOnInit(): void {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UseDirectivesComponent } from './use-directives/use-directives.component';
@NgModule({
declarations: [UseDirectivesComponent],
imports: [
CommonModule
],
exports: [UseDirectivesComponent]
})
export class DirectivesExampleModule { }
<h1>Directives</h1>
<ul *ngIf="users$ | async as users">
<li *ngFor="let user of users">{{user}}</li>
</ul>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/directives-example/users.service';
@Component({
selector: 'app-use-directives',
templateUrl: './use-directives.component.html',
styleUrls: ['./use-directives.component.scss']
})
export class UseDirectivesComponent {
users$ = this.usersService.getUsers();
constructor(
private usersService: UsersService
) { }
}
import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UsersService {
constructor() { }
getUsers() {
return of([
'User 1',
'User 2',
'User 3',
'User 4',
'User 5'
]).pipe(
delay(2000)
);
}
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'initials'
})
export class InitialsPipe implements PipeTransform {
transform(value: string): string {
return value.split(' ').reduce((initials, part) => initials += part[0], '').toLocaleUpperCase();
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsePipesComponent } from './use-pipes/use-pipes.component';
import { InitialsPipe } from './initials.pipe';
@NgModule({
declarations: [UsePipesComponent, InitialsPipe],
imports: [
CommonModule
],
exports: [UsePipesComponent]
})
export class PipesExampleModule { }
<h1>Pipes</h1>
<p>Name: {{user$ | async}}</p>
<p>Initials: {{user$ | async | initials}}</p>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { UsersService } from '../users.service';
@Component({
selector: 'app-use-pipes',
templateUrl: './use-pipes.component.html',
styleUrls: ['./use-pipes.component.scss']
})
export class UsePipesComponent {
user$ = this.usersService.getUser();
constructor(
private usersService: UsersService
) { }
}
import { Injectable } from '@angular/core';
import { of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UsersService {
constructor() { }
getUser() {
return of('phillip couto');
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment