Ria Pacheco riapacheco
riapacheco
/ hero.component.html
Last active
March 20, 2021 23:07
Re-usable hero component that adds CPU-light parallax effect and requires background image URLs added to the child component's scss file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div [class]="heroClass"> | |
| <div class="hero-content"> | |
| <ng-content select="[hero]"></ng-content> | |
| </div> | |
| </div> |
riapacheco
/ overlay-bg.component.html
Created
March 20, 2021 19:14
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="overlay-bg" (click)="overlayClicked($event)" [@overlayAnimation]="showsOverlay ? 'shows' : 'hides' "> | |
| <ng-content select="[overlay-bg]"></ng-content> | |
| </a> |
riapacheco
/ toggle.component.html
Created
March 20, 2021 19:15
Toggle component that tracks the state of 'on' and 'off'; and emits the value to the parent component. (up to parent component to ensure that current state of toggle is stored)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="toggle-container" (click)="toggleClick()"> | |
| <div [ngClass]="toggleOn ? 'toggle-bg toggle-on' : 'toggle-bg'"> | |
| <div [@toggleTrigger]="toggleOn ? 'on' : 'off' " class="toggle"></div> | |
| </div> | |
| </a> |
riapacheco
/ upload.component.html
Created
March 20, 2021 19:17
Upload button to cover up browser's default version of upload and emits the actual event (which carries the file) so that a parent component can access it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="file-uploader" style="cursor: pointer"> | |
| <input type="file" class="file" (change)="upload($event)" style="cursor: pointer"> | |
| <div [class]="uploadButton" style="cursor: pointer"> | |
| {{ buttonText }} | |
| <ng-container *ngIf="progressPercentage !== 100"> | |
| <svg viewBox="0,0,100,7" class="percent-bar"> | |
| <rect [attr.width]="progressPercentage" height="7" fill="#ffffff35" ry="50%"></rect> | |
| </svg> | |
| </ng-container> | |
riapacheco
/ cover.component.html
Created
March 20, 2021 19:19
Cover component that can be used in views, whereby the parent component can supply a coverUrl through data binding as well as configured classes in a binded array
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div [class]="coverClass"> | |
| <div [ngClass]="isMobile ? 'cover-title mobile' : 'cover-title' "> | |
| <ng-content select="[cover]"></ng-content> | |
| <!-- | |
| To add new content on top, use <div cover> ...content... </div> in parent component | |
| --> | |
| </div> | |
| <img [src]="coverUrl" alt="" style="object-position: 50% 50%;"> | |
| </div> |
riapacheco
/ toast.component.html
Created
March 20, 2021 19:20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div [@toastAnimation]="(toast.showsToast$ | async) ? 'open' : 'close' " [class]="(toast.toastOptions$ | async)"> | |
| <div class="toast-message"> | |
| <div class="post-body toast-body"> | |
| <div [innerHTML]="(toast.toastMessage$ | async)"></div> | |
| </div> | |
| </div> | |
| <div class="button-container"> | |
| <a class="close-btn mb-1" (click)="dismissToast()"> | |
| <fa-icon [icon]="faTimes"></fa-icon> | |
| </a> |
riapacheco
/ app.component.html
Last active
March 21, 2021 02:38
Loaded up app.component.ts for detecting user's operating system, browser type, and device width (as mobile, tablet, and desktop)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div #singlePageTopScroll></div> | |
| <router-outlet (activate)="onRouteActivation()"></router-outlet> |
riapacheco
/ state.service.ts
Created
July 20, 2022 18:01
State Service where all Feature State's extend from
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { BehaviorSubject, Observable } from 'rxjs'; | |
| import { distinctUntilChanged, map } from 'rxjs/operators'; | |
| export class StateService { | |
| private state$!: BehaviorSubject<any>; | |
| protected get state(): any { | |
| return this.state$.getValue(); | |
| } |
riapacheco
/ add-class-to-host.scss
Created
July 20, 2022 18:04
Conditionally add class to :host{} element via @HostBinding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :host { | |
| background-color: white; | |
| } | |
| :host(.change-bg) { | |
| background-color: red; | |
| } |
riapacheco
/ conditional-ng-style.html
Created
July 20, 2022 18:06
Conditional [ngStyle]: Add multiple properties / values in ternary operator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div [ngStyle]="isMobile ? {'font-size': '0.8rem'} : {'font-size': '1rem'} "> | |
| This is a div | |
| </div> | |
| <div [ngStyle]="isMobile ? { 'margin-right': '10px', | |
| 'font-size': '2rem', | |
| 'margin-top': '5rem' | |
| } : { 'margin-right': '0px', | |
| 'font-size': '1rem'} "> | |
| This is a div |
OlderNewer