DEV Community: Red

How to add parameterized route in Angular

Red — Mon, 22 Nov 2021 13:25:14 +0000

Suppose you have the requirement that you want to show list of users if the url is /user, and you want to show user detail of a particular user when the URL is /user/useId.

Soultion 1 - We could user querry params

To achieve this we can create a users component, then in its ngOnInit we could check if params are present.

/// Here route is ActivatedRoute

this.route.queryParams.subscribe(params => {

if(params.userId){
//// Do Something
console.log(params.userId);
}
});

You can get the params like this and then write your logic accordindly. If params are present then show userDetails if not then list of users.

Solution 2 - Use parameterized route

Like So

const routes: Routes = [
  { path: '/user', component: UsersComponent },
  { path: '/user:userId', component : UserDetailsComponent}
];

Here we are explicitly stating that if url is /user then show UsersComponent or if it is like /users/xxxid then show userDetials page.

This is more Systematic & preferred way of doing the task.

If you are using only one parameter then use parameterized route. But if you have many parameters then use querry Params as stated above in solution 1.

How to navigate to parameterized route from template

<a *ngFor="let user of users"
  routerLink="/user/{{user.id}}">
  {{user.name}}
</a>

Assume we are having list users and clicking on a user name will open that particlular user details.

To get the value of ther parameter use ActivatedRoute

console.log(this.route.snapshot.paramMap.get('userId');

Points To remember

If you are getting any error remember to recheck the route you had written. sometimes you append extra / like user/:userId/ or prepend extra slash (/) like /user/:userId.

Although you can use more then two parameters
like user/:userId/:id/:age
I would suggest to avoid it and if it cannot be avoided atleast limit it to two parameters.

How to use SSH key authentication in Github

Red — Wed, 25 Aug 2021 07:10:27 +0000

SSH (Secure Shell) is used for more secure access between two parties. ssh is a password-less communication.There are two keys generated, private key & public key. The public key can be shared to other parties. Though the private key should be kept secret. If you know about cryptography then it would be easy to understand the concept fully. You can watch nasser hussian’s video to get some understanding. Though it's not required to fully understand the concept.

(Step confirmed working on Linux)

Open the terminal in root directory
Type

ls .ssh

in your terminal to check if there are any ssh present.

To create one type

ssh-keygen -t rsa -b 2048 -C ''Youremail@address''

It will prompt you to provide the location where the ssh file is to be created press enter to keep default location.
You can add a password for your file, to skip just press enter.

Now again if you again type command

ls .ssh

You may get something like this

id_rsa  id_rsa.pub

The id_rsa.pub is the public key

cd .ssh && cat id_rsa.pub

to see the public key

Now copy the key and paste it into https://github.com/settings/ssh/new

Now select any repository that you want to clone locally.

You will find an option to select the ssh link for the repo

git@github.com:organization-name/respo-name.git

The next steps are

git clone git@github.com:organization-name/respo-name.git

(be sure to use the device from which the ssh keys was generated)

Now you have successfully set up ssh.

What if you already have repository in your local using http

First open the terminal from the root directory of your repository.
You could check your remote git url using

 git remote -v

Now to set the ssh url can do

git remote set-url origin git@github.com:organization-name/respo-name.git

Now after this you could do all push pull normally as you would do.

JavaScript : Create Map to Store Key Value Pair

Red — Tue, 24 Aug 2021 06:32:47 +0000

JavaScript map
When you want to store data which can be accessed by a key rather than looping over the data like Arrays
Or you wanted to create an alias. For example, you are storing an Array of some object which contains emails but you also wanted to store the name of that user.

Either you add the name attribute to the object or Instead create a map to get the name corresponding to the email. (Map will be helpful when the array of objects have common attribute values)

Syntax with Examples

    let myMap = new Map();

    let myFilledMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"]
    ]);

The map is key-value pair like an Object. So to add a value we could do

    myMap.set("redthemers@gmail.com","Red");

Here the first parameter is the key & the second is the value to be stored. and to retrieve the data I could use

    myMap.get("redthemers@gmail.com");

To check if a value Exists

    myMap.has("redthemers@gmil.com");

To Delete a particular value

    myMap.delete("redthemers@gmail.com");

To clear everything from a Map we could do

    myMap.clear();

Common Map Operations

map.get(key)
map.set(key,value)
map.has(key)
map.delete(key)
map.clear()
So InShort Its Similar to an Object & very useful.

For Practice

Open your browser console (f12 for chrome) and create a map add some properties. Now try to add a key that had already been added. See What Happens. Also, can we add an Object as a Key in Map?

How to extract text from HTML String using javascript

Red — Tue, 24 Aug 2021 05:59:08 +0000

There are various ways to extract text from an html string but we will be doing it using Regex.
First we will store the html string in a variable then apply the replace method and pass and the appropriate regular expression and another parameter for the value to be changed with.

Example :

        let  name = “my name is anzar”
        let  newName = name.replace(“anzar”,”red”);
        console.log(“the new name is ”, newName);   // my name is red

Here if we see the first parameter is used to find the matching word from the variable . And the second param replaces it with the matched word.

Simple right, but wait what if there are many matching words for anzar

Example :

        let name = “hey anzar how are you anzar”;
        let  newName = name.replace(“anzar”,”red”);
        console.log(“the new name is ”, newName);

If we try again on this string the result would be - hey red how are you anzar.
So it will work for the first matching word only. As html have many tags so this won’t work for us.
In Order to get this working we need to add /g at the end of the first parameter. This means global, so now every matching word will be replaced, Instead of only the first word.

Great, now let's do our main task, There are close to 100 html tags like p tag, a tag etc.
So it needed to remove every tag the way above. Just kidding 😜

Regular Expression comes for the rescue. This is one one of the most powerful things you can use in programming but is highly frustrating.
We can’t understand it now but don’t worry i will provide you the expression for removing html.

The regular expression is -

      replace(/<[^>]*(>|$)| |‌|»|«|>/g, ' ');

The second parameter is empty because we just wanted to remove the html This will work great. Just one more stuff remaining.

In html & is represented as & so if the text in the html contains & there would be chances that it may have & So to remove this lets again use replace method but this time instead of passing the second parameter as empty string we will pass & because we wanted to preserve the text.

Example :

replace(/&/g,"&");

Finally we removed everything and just got a plain text. Hope you had understood it completely. Do remember to add /g at the end of the first parameter to remove every matching instance.

Getting Started with ionic in Angular

Red — Tue, 24 Aug 2021 05:45:46 +0000

Intro
Ionic is one of the leading frameworks for hybrid app development. That means to have one code base for all mobile, Desktop app & web. One can create an app using javascript frameworks like angular,react & vue. Though in this article we will be creating an ionic app using angular. Let's get started.

Prerequisites
Basic understanding of node & npm
Had built at least hello world app in angular
At least know what Android studio is

Installations
First let's install all the required tools/software

VS code editor you can install it from - vs code download

Command line -

Linux - the default terminal is more than enough
Windows - recommended windows powershell or the default terminal

See how to add env to use in terminal

Install node & npm

For linux perform the following operation -

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

Use
node --version &
npm --version
to check if it's installed correctly.
For windows please refer - nodejs for Windows

After you had installed the above stuff now run the following command in terminal to install ionic tooling

npm install -g @ionic/cli native-run cordova-res

Run ionic --version to check if its installed correctly
Running the app
Now we create a simple ionic app with these simple commands

ionic start myIonicapp tabs --type=angular --capacitor
cd myIonicapp
Npm i
ionic serve

That's it, now your test application should be running on localhost 8100 or as mentioned in the terminal.