A 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 you want to switch to using the SCSS stylesheet format in your project, this transition can be daunting in cases where the project has already gotten big.

In this article, I will cover:


In 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.

Unsplash: Vinicius “amnx” Amano

I assume you know what forms are and you have worked with Angular reactive forms.

We will look at two approaches to achieve this:

  1. Using the ControlContainer which enables us to pass a parent form down to it’s sub-forms which are implemented as components.
  2. And the @ViewChild which help us get a class instance of the component which in this case will be a form component instance.

Angular provides…


This is just a quick writing exercise about CSS & Sass variables, its not meant to teach but it can teach you something, I will not cover what CSS and Sass are.

A property name prefixed with double dashes like below is a CSS custom property that can be reused in the current rule-set scope.

--my-variable: #000

The variable’s value above can be assigned to another CSS attribute like below. Using the var func.

#myHeading {
color: var(--my-variable);
}

The CSS variable my-variable needs to be accessible in the #myHeading rule-set, to achieve this, you can have the variable defined…


This error can be caused by a reference to the Window object if you are rendering your application from a server like Node.js.

Image source: https://learnwithmanoj.com/angular-5-universal/

I will share how I have solved this issue, in my case this was caused by HammerJS which does not support server-rendered applications. This error can also be caused by your code that references the Window object or any third-party module that references the Window object without having a defensive check against an undefined value of Window.

Angular core: v10.0.5

I have incurred many errors when resolving this issue, during the processes, I will quickly list some…


Image credit: (Zdzisław Beksiński)https://twitter.com/art_beksinski/status/1235183766827667457

Why? Because I often appreciate being here on earth and that tells me my consciousness will continue existing and maybe miss being here or maybe not.


On a new SSD drive laptop, I got this error on the Installation type step I could not manage the disk because when clicking the continue button the window freezed, I could only see dev/sda on the drop-down.

The steps I took to solve this were:

I have also changed the windows Power options

When power button is pressed: shutdown.

That solved my issue.


Vue and TS

I thought having a type system especially for the Vuex store files for TechRelief would make coding in the project efficient r I wanted to map the entity’s different states/stores in the code and the collections on Firebase

I am new to Vue’s echo system, but since it uses JavaScript, something I am familiar with, it was relatively easy to get a hang of it.

I did not want to infer everything including the components, but just the data models and some other objects that might need some typing. But why.

One of the motives is the following from a…


date-time

Your date-time values might not confirm to the ISO 8601 format, now your schema validations using the AJV NPM package are failing because of that, you might realize this very late when the correction would require a lot of changes in your code base(That’s why it is good to DRY).

I have incurred this problem.

How I have solved it was to use a custom date-time format and a regular expression to validate the date-time value, let’s have a look at the example code.

const dateTimeRegex = new RegExp('^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9]) (2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?$');const ajv = new Ajv();ajv.addFormat('date-time', { validate: (dateTimeString) =>…


I got this error when running the ng new command of the CLI.

From my knowledge so far, this error could be caused by a corrupted tarball of the @angular/core package, a broken Angular CLI installation (I think that was the case for me — After forcing the Angular CLI update using the force flag) or conflict between the CLI and the globally installed TypeScript.

So in my case, after updating the CLI with ng update and the force flag like below:

ng update @angular/cli @angular/core --force

I got the following error when creating a new Angular project using the…


You can clear the file or delete it and then re-create it (touch known_hosts) and then re-connect: ssh name@ip, enter yes and press ENTER in prompt.

I am not sure, but I will document this anyway.I think if a remote server/host changes, the known_hosts file for SSH need to be updated, that is why I am getting the below message after some dude said I SSH to a new VM that is pointed to be the same IP address as the old one(This must make sense). See below.

Thabo Ambrose

Stargazer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store