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:

shopping-list.component.css
shopping-list.component.html
shopping-list.component.spec.ts
shopping-list.component.ts

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:

src
 app
   shopping
     list
       list.component.css
       list.component.html
       list.component.spec.ts
       list.component.ts

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.

Angular’s If statement (and Else)

In Angular, you can use *ngIf to conditionally add an element in the DOM only when a condition is true.

This is different from showing an element when a condition is true because with *ngIf, it will not exist at all in the DOM unless the condition is true. Here is a sample (using square brackets from html)

[div *ngIf="showDiv"] This is the inner html / inner text in the div
[/div]

The ‘*’ must be there.
The ‘*’ means it is a Structural Directive that will change the structure of the DOM.
The value you of ‘showDiv’ must be a boolean value.
The ‘showDiv’ in this case is a property in my ts file. I could also bind to a showDiv function in my ts file just by adding parens as follows:

[div *ngIf="showDiv()"] This is the inner html / inner text in the div
[/div]

What if you want to do an ‘else’? It’s a little messier. You must add a ng-template and name it like this (the name doesn’t really matter what you put).

[ng-template #myElseSection]
  [p] Paragraph to show when else is hit. [/p]
[/ng-template]

Now you else can work like this:

[div *ngIf="showDiv(); else myElseSection"] This is the inner html / inner text in the div
[/div]

[ng-template #myElseSection]
  [p] Paragraph to show when else is hit. [/p]
[/ng-template]

So the first div is shown when the ‘if’ is true, and the paragraph in #myElseSection is shown when the else is true.

Angular / Javascript – Do something after a time elapse

Let’s say you want to change a property, or have something occur on your Angular page after the page loads initially. The ‘setTimeout()’ is useful here.

(ts file)
...
export class MyComponent implements OnInit
{
  showAdvert = false;

constructor(){
  setTimeout(() => {
    this.showAdvert = true;
    }, 5000);
  }
}
...
}

In your html file

//I'm using square brackets where you need 
//angle brackets because I'm fighting against wordpress.
[div]This is the main div
  [div [disabled]='!showAdvert' ]This is an annoying ad pop up box that appears 5 seconds after the page is 
  initially loaded because the value of 'showAdvert' changes at that time.
  [/div]
[/div]

So you have a div that isn’t initially showing because it is disabled, however 5 seconds after the constructor runs, the box will appear because ‘showAdvert’ becomes true.