How to get an Enum value from a string

Lets say you have an enum like this

public enum Colors 

And you need to get the enum value of ‘Colors.Red’, but you only have the string “red”.

I wrote this function to return the proper enum value and it doesn’t care if you pass in “red” or “RED” or “rEd” because it is case insensitive.

 private T GetEnumValue(string caseInsensitiveStringVal)
            var properName = Enum.GetNames(typeof(T)).SingleOrDefault(x => x.ToString().Equals(caseInsensitiveStringVal, StringComparison.OrdinalIgnoreCase));
            //get value from properName
            if (properName != null)
                return (T)Enum.Parse(typeof(T), properName);
            throw new InvalidDataException("Invalid value."); 


//Now call it like this
Colors myColor = GetEnumValue("rEd");

Debugging Angular Typescript files

Type script is converted into Javascript at runtime. It would be nice to be able to set break points on your TypeScript in Chrome when debugging. This can be done easily.

In the Developer tools, Source tab, there are a list of Sources.
Expand the ‘webpack://’ source
Expand the ‘.’ folder
Expand the ‘src’ folder
Find your ts file that you want to set a break point in, and you are done.

Another option.. Angular Augury

Google Angular Augury.
Install it.
It is a Chrome Extension.
Now Augury should show up in your Developer tools (in your tabs with ‘Sources’).
Using Augury, you can watch what is going on with your Angular as your pages run.

Angular creating components

When you use the command line to create a component, it will be added to the src/app folder.
The following command:

ng g c shoppingList

will create a folder named ‘src/app/shopping-list’, which contains:


Alternatively, if I want to create a folder called ‘shopping’ and inside that have an item called list, I could use this command:

ng g c shopping/list

And that will give this structure:


What if we don’t want the spec.ts files?

ng g c shopping/list --spec false

Angular’s For statement

Let’s say you want to add multiple components on an html page, and that in your component’s ts file you have declared an array of users, and on your html template you want to display each user.

In your ts file you have something like this:

export class UsersComponent implements OnInit{
//hard code an array of users here. Of course you'll really want to pull these from somewhere.
users = ['Smith, Jim', 'Brown, Jane', 'White, Anne'];


In your html template, we want to display the users from our ts file. We assume we have already created an ‘app-user’ component. Here’s our html file

[div] some html [/div]
[app-user *ngFor="let usr of users"][/app-user]

* ‘users’ above must match the variable in your ts file, but ‘usr’ could have been set to ‘u’, ‘user’, ‘x’, or whatever you want.

Like ngIf, ngFor is another Structural Directive, and therefore it needs the *.

Indexes in a for loop

Let’s say that you need get the index of your items. I can’t think of great reason to use an index in the sample above, … anyway, here is how you can get the index of the array items.

[div] some html [/div]
[app-user *ngFor="let usr of users; let i = index;"][/app-user]

*’index’ is a key word, but ‘i’ is just a variable I chose. The above example is contrived, but the point is you can get the index of the array item.