Published inMotf Creations·PinnedMigrate from CSS to SCSS stylesheets for an existing Angular applicationA quick guide to using SCSS in an Angular application that was scaffolded to use the default stylesheet format. You might have forgotten to provide the style=scss flag or maybe you didn’t know that it existed when you were generating a new Angular application using the Angular CLI, and now…JavaScript5 min readJavaScript5 min read
Nov 12, 2022An Intro to the Singleton Design Pattern in Angular.Design patterns are best practices and reusable solutions to recurring software design problems. Design patterns are independent of a programming language. They are ways, ideas or approaches that help us write efficient code. The patterns have three main types, which are: Creational, Structural and Behavioral design patterns. In this article…Angular1 min readAngular1 min read
Nov 6, 2022An elegant why to check if a Directive/Component @Input property has changedUsing the ngOnChanges hook and the ‘in’ operator. ngOnChanges(changes) { if ('someInputProperty' in changes) { console.log('someInputProperty exists in changes'); } }Angular1 min readAngular1 min read
Oct 29, 2022Choosing classes as types over interfaces & type aliases in TypeScript.Typed code is a breeze to work with Why would I use a class as a type? Because interfaces and type aliases are not present at runtime. Example usecases Type guards @Input() content!: Type<unknown> | TemplateRef<Element> In place of Type<unknown>, you can also use ComponentType<unknown> imported from the CDK (@angular/cdk/portal) or maybe that’s a bad idea. I dunno. With the above…Angular2 min readAngular2 min read
Oct 19, 2022Unexpected value ‘NgxsRootModule’ imported by the module ‘DynamicTestModule’. Please add an @NgModule annotation.Angular Nx 14 and Jest Possible Solution npx ngcc 🐞[BUG]: Unexpected value 'NgxsRootModule' imported by the module 'DynamicTestModule'. Please add… You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com Please add a @NgModule annotation in AOT Compilation · Issue #355 · ng-packagr/ng-packagr You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.comAngular1 min readAngular1 min read
Oct 9, 2022Angular Dependency Injection Quick GuideA brief summation of the Angular DI design pattern Dependency injection is the idea of reusing parts of your application in dependent modules. In Angular, one example of the DI system in action would be a component, directive, etc., …Angular3 min readAngular3 min read
Published inMotf Creations·Sep 24, 2022Nx workspace: npm ERR! The Cypress App could not be downloaded.This error comes up when creating a new Angular workspace using the create-nx-workspace command. I was connected to an organization’s network, when I ran the command below: npx create-nx-workspace@latest This resulted in the error below > NX Nx failed to create a workspace. And the error log was something like…Angular2 min readAngular2 min read
Published inMotf Creations·Oct 8, 2021Exploring the difference between disabling a form control through reactive forms API and HTML attributesHaving parts of a form disabled is a common requirement for any large application. Sometimes users must be prevented from interacting with a form based on their role in an application; an input field can also be disabled because its value is pre-populated and no user input is required. In…Angular7 min readAngular7 min read
Sep 25, 2021A Basic Guide to the Methodology of Data Modeling for MongoDBMongoDB offers many solutions to the same problem This article is merely a quick reference guide to key considerations when modeling a database for MongoDB, this article can also be useful for modeling any other non-relational or document database; this article does not delve deep into what MongoDB is. The Document Model Data as Key/Value pairs and Polymorphism In…Mongodb9 min readMongodb9 min read
Published inMotf Creations·Jan 31, 2021Implementing reusable and reactive forms in AngularIn this article we will learn about two ways to implement reactive and reusable forms that have the capability to be used as sub-forms and also be used as standalone forms. I assume you know what forms are and you have worked with Angular reactive forms. We will look at…Code4 min readCode4 min read
