Posted on

How to add material design icons on Angular 11

material icons

Hi guys as always i have a TLDR section so that people don’t have to deal with my sob story of the week. These are just my personal notes that I’ll go back to as to when I want to add material design icons to my project.

So, I have seen this before and of course there are a number of options as to how to install material design icons for your angular project, this is the solution that worked for me on my personal project.

TLDR
please note, if you have a project already built be sure to delete your node_modules in case of any problems.

// use this command in gitbash
npm install --save @angular/material && @angular/cdk && material-design-icons

This would be my first step the npm site has good documentation on how to set everything up but i’ll just continue on what i did next.

Add the following link in you index.html file 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Now you’ll need to do some imports to your app.module.component.ts file it should look something like this.

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

// Material stuff
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MatIconModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

I just added a basic material icon examples here for the view app.component.html.

<div class="container">
    <h2>Material icon samples</h2>
    <span class="material-icons">face</span>
    <i class="material-icons">visibility</i>
    <mat-icon>home</mat-icon>
</div>

That should be it, I have a repo that has the material design’s icon on an Angular 11 project so it should be straight forward to compare. Have a great weekend!

POST EDIT
I came across an issue when following my step, if you have any compiling issue after setting up the icons run this command to install this version of material icons

npm i @angular/material@11.2.13

stackoverflow: solution here

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 how to generate a new project in to a specific directory

bird and snow

When you are starting you just don’t know what you can do at times. I have been in a situation where I already have a file on where I want to put my new Angular project but sadly my folder structure gets messed up completely.

POST note: You will need to have installed the Angular CLI first before doing this step.

So use this command line below to create an Angular project and place said project into a specific directory of your choosing:

TLDR

ng new angular-project --directory=./new-angular-project-file

This should sort you out. In development its important to keep your work space clean especially your git repo. It doesn’t reflect well if your repo is being reviewed or checked out.

Posted on

JavaScript Changing types from string to number

Jamerson

I figure the image would be appropriate for south Africans even though the image is from the Netherlands but thats nether here or there.

ANYWAY

Talking more JavaScript here, a developer may been in a situation where one is needing to change types of a certain variables. This is called type conversion. At times you may be in a position to change a type of variable to get a certain function to execute.

The two ways I know how how to cast a string to a number are the following:

var year = '1985'; // set to string

// for interest or certain validation you can 
// use typeof to verify the type, 
// will be doing this for the examples below:

console.log(typeof year, year);
// expected output: string 1985

// Variable year has been set to a string now for the magic

// option 1: Casting
console.log(typeof Number(year), Number(year));
// expected output: number 1985

// option 2: Method
console.log(typeof parseInt(year), parseInt(year));

// expected output: number 1985

Lets say you want to change a number into a string, that is also possible using casting as well as the toString() function.

var year = 1985; // declared as a number

// Using typeof to verify the type same as above sample

// will be doing this for the examples below:

console.log(typeof year, year);
// expected output: number 1985

// Variable year has been set to a string now for the magic

// option 1: Casting
console.log(typeof String(year), Number(year));
// expected output: string 1985

// option 2: Method
console.log(typeof (year).toString(), (year).toString);

// expected output: string 1985

That is all for today.