Skip to content

Instantly share code, notes, and snippets.

View NathanWalker's full-sized avatar

Nathan Walker NathanWalker

View GitHub Profile
@NathanWalker
NathanWalker / ns-if.directive.ts
Last active May 4, 2024 01:00
nsIf - Specialized NativeScript directive for Angular to optimize view show/hide with change detection under mobile constraints
import {
Directive,
ElementRef,
EmbeddedViewRef,
Input,
OnDestroy,
OnInit,
Optional,
TemplateRef,
ViewContainerRef,
@NathanWalker
NathanWalker / view.component.html
Created September 27, 2023 23:30
iOS 17 variable color symbol effects with NativeScript
<Image [src]="image" stretch="aspectFit" (loaded)="loadedImage($event)" class="w-full h-full"></Image>
@NathanWalker
NathanWalker / @angular-devkit+schematics+16.1.3.patch
Created July 6, 2023 01:56
Nx with SchematicNameCollisionException error patch fix
diff --git a/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js b/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js
index 1d2c59c..9ed0cb1 100755
--- a/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js
+++ b/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js
@@ -137,7 +137,7 @@ class FileSystemEngineHostBase {
const aliases = description.schematics[schematicName].aliases || [];
for (const alias of aliases) {
if (allNames.indexOf(alias) != -1) {
- throw new SchematicNameCollisionException(alias);
+ // throw new SchematicNameCollisionException(alias);
@NathanWalker
NathanWalker / birthday.component.html
Created June 30, 2022 04:15
NativeScript for Angular pipe usage sample
<Label text="The hero's birthday is {{ birthday | date }}"></Label>
@NathanWalker
NathanWalker / birthday.component.html
Created June 30, 2022 04:14
Angular web pipe sample
<p>The hero's birthday is {{ birthday | date }}</p>
@NathanWalker
NathanWalker / nativescript-highlight.directive.ts
Created June 30, 2022 04:13
NativeScript for Angular Directive using @HostListener sample
import { Directive, ElementRef, HostListener, inject } from "@angular/core";
@Directive({
selector: "[appHighlight]",
})
export class HighlightDirective {
currentColor = "";
private el = inject(ElementRef);
@HostListener("tap") onTap() {
@NathanWalker
NathanWalker / view-directive-usage.component.html
Created June 30, 2022 04:12
NativeScript Angular directive usage sample
<Label appHighlight text="Attribute Directive"></Label>
@NathanWalker
NathanWalker / Angular Directive Sample
Created June 30, 2022 04:11
Angular Directive Sample
import { Directive, ElementRef, inject } from "@angular/core";
@Directive({
selector: "[appHighlight]",
})
export class HighlightDirective {
private el = inject(ElementRef);
constructor() {
this.el.nativeElement.style.backgroundColor = "yellow";
@NathanWalker
NathanWalker / NativeScript Angular standalone component
Created June 30, 2022 04:11
NativeScript for Angular v14 standalone component
import { Component } from "@angular/core";
import { NativeScriptCommonModule } from "@nativescript/angular";
@Component({
standalone: true,
selector: "hello-standalone",
imports: [NativeScriptCommonModule],
template: `<Label text="Hello, I'm a standalone component"></Label>`,
schemas: [NO_ERRORS_SCHEMA],
})
@NathanWalker
NathanWalker / NativeScript background service bootstrap
Last active June 30, 2022 04:10
NativeScript for Angular (No UI) module to handle only background services
@NgModule({
imports: [NativeScriptModule],
})
export class BackgroundModule {
ngDoBootstrap() {
// do nothing, this is not an UI module
}
}
const moduleRefPromise = platformNativeScript().bootstrapModule(AppModule);