Justin

@iamjustin.dev

314 Followers 433 Following

Front-end dev. Mostly Angular. I write about it as well! https://medium.com/@iamjustin

@Component({ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], selector: 'app-group', template: ` <form> <div #personGroup="ngModelGroup" ngModelGroup="person"> <input type="text" [(ngModel)]="formModel().name" name="name" #nameControl="ngModel" /> </div> </form> `, }) export class GroupComponent { personGroup = viewChild.required<NgModelGroup>('personGroup'); nameControl = viewChild.required<NgControl>('nameControl'); formModel = signal({ name: 'John', }); ngAfterViewInit() { this.nameControl().valueChanges!.subscribe((value) => { console.log('name', value); }); setTimeout(() => { this.personGroup().valueChanges!.subscribe((value) => { console.log('personGroup', value); }); }); } }
Screenshot of TypeScript/Angular code showing an AddressInfoComponent class. The code includes a form template with a company ID input field and an address display section. The component class contains dependency injections and an Observable pipe chain that processes address data based on company ID validation.
type Post = { type: 'post'; title: string; }; type Todo = { type: 'todo'; completed: boolean; }; type Book = { type: 'book'; author: string; }; type Entry = Post | Todo | Book; @Component({ ... template: ` @let entry = this.currentEntry(); @if (entry.type === 'post') { {{ entry.title }} } @if (entry.type === 'todo') { {{ entry.completed }} } @if (entry.type === 'book') { {{ entry.author }} } `, }) export class EntryComponent { entry = input.required<Entry>(); currentEntry = computed(() => this.entry()); }
A web app that shows a list of posts by default. It opens a popup in the app where the user can select different responses of the APIs. When selecting a different outcome, the web app will fetch again and get a different response.
Code of a random input component that utilizes outputFromObservable to trigger an emit with the field value when the field is valid.