Posted on

How to add scss to your Angular project fast

scss new niece

Of course as always there is a TLDR thing somewhere down there.
I come across this from time to time and I normally forget all about it…then I just end up always using css (come on I can not be the only one)

Lets get to it, you have either built or going to build an angular project. In the past i have seen it ask and say “you wanna css, scs,s sasax and …” other options.
so i’d normally select scss and then it just worked.

TLDR COMMAND FOR ANGULAR PROJECT ALREADY BUILT
If you have already built an angular project then run the following line of code.

ng config schematics.@schematics/angular:component.style scss

This should add the style as scss in your angular.json package
for more in-depth detail you can read up on the source. on the one that has 557 votes oh wait 558.

ANOTHER THING TO NOTE
if you get the following error:
“Error Module not found: Error: Can’t resolve PATH in PATH or “didn’t return string.

Be sure to update your component’s style location cause it will still point to your component.css file


In the reference above, they also show you how to add scss to a new project by use of the following command:
TDLR COMMAND FOR NEW ANGULAR PROJECT

ng new NEWANGULARPROJECTNAME --style=scss

Ok that’s it good luck
If this solution did not work for you, please feel free to comment. I know there never is a solution for everything.

Posted on

Angular active router link

merryxmas lego

Merry Xmas and there isn’t a TLDR on this post but there is an angular 10 git project repo below! stay safe wear a mask properly and take care of yourselves.


I assure you that this is easier than you think it is. Firstly you’ll need to add the active rout class to your css or scss,

I’ll be honest I went a bit overboard with the styles but ya its for demonstrative purposes I swear

Side Note I would love some feedback on if my image snippets are helpful or readable.
You want to place some code in your style sheets for the active state style.


.nav ul li a.active {
    font-weight: 600;
    background-color:blue;
    color: white;
}

// or just simply
.active {
     font-weight: 600;
     color: white;
}

You want to import this active router functionality into this project so go to your project modules. This snippet is in the context of my project by the way so just note the RouterModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { PageOneComponent } from './components/page-one/page-one.component';
import { PageTwoComponent } from './components/page-two/page-two.component';
import { PageThreeComponent } from './components/page-three/page-three.component';
import { RouterModule, Routes } from '@angular/router';
import { NavbarComponent } from './components/navbar/navbar.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'page-one', component: PageOneComponent },
  { path: 'page-two', component: PageTwoComponent },
  { path: 'page-three', component: PageThreeComponent },
  { path: '**', component: HomeComponent }

]; // sets up routes constant where you define your routes


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageOneComponent,
    PageTwoComponent,
    PageThreeComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Note the export and imports above, be sure to place it in the correct style sheet. From there active your navigation styles tags like so.

<nav class="nav">
    <ul>
      <li><a routerLink="/home" routerLinkActive="active">home </a></li>
      <li><a routerLink="/page-one" [routerLinkActive]="['active']">page-one</a></li>
      <li><a routerLink="/page-two" [routerLinkActive]="['active']">page-two</a></li>
      <li><a routerLink="/page-three" [routerLinkActive]="['active']">page-three</a></li>
    </ul>
  </nav>

Npm install and make sure nothing is missing and you should be well on your way with the active styles triggering per active link match. For a working example checkout my github project.

For a deeper implementation referencing parents and ancestors please be sure to take a look at the following post.

Posted on

[newbie] How to add flags on Angular Fast

I am assuming you have already built your angular app.
ok.
As always lets cut to it.

Html syntax required:

// Lists country flags
<div *ngFor="let country of countries">
      <ul>
        <li class="item">
          <a class="flag-icon flag-icon-{{ country.code }}"></a>
          {{ country.name }}
        </li>
      </ul>
    </div>
// Hardcode flag
<div>
 <a class="flag-icon flag-icon-za></a>
</div>

The above sample code will list some flags that have been populated by the countries array. Here is a countries array I made you can use to get started.

 countries: Country[] = [
    {
      name: "South Africa",
      code: "za",
    },
    {
      name: "France",
      code: "fr",
    },
    {
      name: "Switzerland",
      code: "ch",
    }
]

Add this line of code from CDN in your index file’s <header> tag.

https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css
Should look something like this if you not sure.

You’re DONE!
If you are having any troubles you can take a look at
the repo goodbye , good luck and stay safe.

Posted on

Git how to add a comment and quit VIM

This happens to me from time to time. When you are trying to merge with some local branch and there are some conflicts you want to fix on the fly then this terminal asks you to add a comment so you do and you don’t know how to exit….

Terrifying stuff I know so here is how you close that VIM terminal. After adding your comment and looking lost enter this below:

:wp

For definitions and more detail check out this source

Posted on

JavaScript Keypresses keyup keydown keypress

As Always I try to make my blog cater for peeps that are just looking for concise answers, so if you scroll down there is a TL DR section below. If you are curious of my thoughts then keep reading.

My knowledge of keypresses consisted of the brief summary of “you press a key and you can make something happen”. Turns out there is a bit more to it.

Keypresses have three different trigger points. I’m going to put my naive understanding of them first, then what MDN says cause that is the best source of truth out there in my opinion. I also used StackOverflow.

First you have keydown

My understanding of a Keydown is the action of when the button is pressed, so as the key is pressed down you can set an action or trigger something from that point.

Unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.

from MDN

To sum keydown: Keydown will trigger for all keys pressed(odd ones being ctrl, shift. delete..etc). If you press any key thats a keydown.

Second you have keyup

My understanding of a key up is the “release” action of the keydown action. So you can set an action upon lifting your key from a pressed state.

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase “a” will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase “A” is reported as 65 by all events.

from MDN

To sum up keyup:. It trigger upon the release of a pressed key. Don’t worry MDN can be intimidating at times. It took me a while, but they are saying a keyup will trigger with a value of what key was pressed. Also, I think MDN has already moved on tooo..

Thirdly the keypress

My understanding: Keypress is the full action of just typing a key. so hit a key and let go and you have yourself a keypress buddy.

The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don’t produce a character value are modifier keys such as Alt
, Shift
, Ctrl
, or Meta

From MDN

Ok, so my understanding of a keypress was a bit off. It appears to be including all chars that set a value and not other keys like shift, control, alt…etc that don’t produce a character. According to MDN it appears that the keypress is deprecated so you would just need to be aware of that when using keypress.

I never in my life thought that someone could complicate a key press, but here we are 2020 virus is out. Try to stay inside guys ok.

TL DR

The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user releases a key.
The onKeyPress event is triggered when the user presses & releases a key (onKeyDown followed by onKeyUp).

from stackoverflow

In my defence I’m not as technical as MDN, my theory was around more towards what the stackoverflow post said.

I’ll leave you with that guys I really hope that this helps you out and helps you know that there is a bit more to a keypress than meets the eye.

On a side note. I got some positive comments on my previous post. Thanks so much for the support I’ll continue posting my findings and sharing the knowledge to help myself and others. I was so chuffed in fact i made a live sample of some javaScript and keypresses right here enjoy.

Posted on

How OAuth 2.0 and OpenID connect work

I was shared this video for a tech discussions and I have learned so much from this man. I wanted to add some personal notes below but its actually a fair amount to digest. Enjoy the video and get ready for the flow of knowledge coming your way.