#Angular in #VSCode: Programmatic Router Outlet targeting

Mozilla_Firefox.pngdownload.jpgI wanted to put a component into a named router outlet, but do it from another component based on some database/API value. Here’s how I was able to get it to work relatively easily:

My main component, Customers, has this route setup:

    const routes: Routes = [
      {
        path: "customers",
        component: CustomersComponent,
        children: [
          {
            path: "customerlist",
            component: CustomerListComponent,
            outlet: "detailsOutlet"
          }
        ]
      }
    ];

and this named router outlet template:

   router-outlet name="detailsOutlet"

In the CustomerComponent I can then load the CustomerList component into the outlet:

    const parentPath = "customers";
    const childPath = "customerlist";
    this.router.navigate(
      [parentPath, { outlets: { detailsOutlet: childPath } }],
      {
        skipLocationChange: true
      }
    );

I used 2 const values to show where the string values come from. You’ll notice that the paths there match the route paths above.

I didn’t want the URL to change or the history to get the outlet assignment, so I specified the skipLocationChange.

 

#Angular and Asp.Net 3 Core 3: Creating up to date documentation

imagesAfter you create a new Asp.Net Core 3 Angular project, you’ll want to add documentation. Keeping it up to date is always a chore, but with some new tools, that can be made much easier.

We’re going to go over CompoDoc, a free tool to create and update Angular Documentation.

2019-11-12 11_15_10-Window.png

The first step is to install it into your Asp.Net Core 3 Angular app. Open up the ClientApp folder in a Terminal and enter this:

npm install --save @compodoc/compodoc

Once done, go to your package.json file and add the compodoc script to the script’s node:

2019-11-12 11_19_34-PluralsiteAngularRouting - Microsoft Visual Studio.png

To generate the docs, just run this in the same terminal:

 npm run compodoc

It will generate a ClientApp/documentation folder. Open the resulting index.html to view your new shiny docs.

Re-run the compodoc script to update as needed.

2019-11-12 11_23_01-Window.png

 

 

#Angular and Asp.Net Core 3: Using a real-fake backend for prototyping and testing.

2019-11-11 12_59_09-Window.png

Real-Fake backend. Yah, I know, it sounds weird.

I’m in a situation where I want my Angular code to post to a real HTTP backend and return some values, but I don’t want to wait/create a real Asp.Net Core 3 backend to test or wire up selenium. I need a really fast turn around in a prototype. In this article that’s what we’ll do.

I’ll use Angular for this post, but React or Vue, etc would work just fine.

I’ll assume you have a little bit of an Angular background, but it’s not needed too much to get the idea.

In my component I have a form submit handler wired up and a data service stub as well:

export class UserSettingsFormComponent implements OnInit {

  constructor(private dataServiceDataService) {}

  onSubmit(form: NgForm) {
    this.dataService.postUserSettingsForm(this.userSettings).subscribe(
      result => console.log('success', result),
      error => console.log('error: ', error)
    );
  }

My data service just returns what is posted:

export class DataService {
  constructor(private httpHttpClient) { }

   postUserSettingsForm(userSettings: UserSettings): Observable<any> {
       return this.http.post('https://putsreq.com/qYVARlIpT0IiOUSAmp0a', userSettings);
  }
}  

What’s the funny-looking URL? Here’s the magic. Go to https://putsreq.com and tap the Create a PutsReq button.

2019-11-11 12_53_58-Window.png

Then in the screen that appears,  add this to the “Response Builder and press Update:

var parsedBody = JSON.parse(request.body);
parsedBody.id='MyIdIsBest';
response.body=parsedBody;

Now when we run our Angular form and post the value, PutsReq will execute our request and return what we indicated.

With this we can quickly edit and experiment with posting and modifying a response from our Angular app.

Here’s what the PutsReq page will show as Requests from your app come in:

2019-11-11 12_57_47-qYVARlIpT0IiOUSAmp0a.png

 

 

#Angular and Asp.Net 3 Core: Quick X-Ray into form properties

download.jpgOnce you have created an Angular app inside Visual Studio 2019 using the Asp.Net 3 Core template, you are ready to build some wonderful tools. Here are a few tips on how to quickly see behind the curtain in how Angular modifies and handles Forms and Form Fields.

Let’s start simple: Imagine you have a simple form where an input field is two-way bound to a field on your component:

<form>
  <div class="form-group">
    <input [(ngModel)]="name"  class="form-control" required />
  </div>

Let’s add an Angular local variable to the input called “#classTest

<input [(ngModel)]="name"  class="form-control" required #classTest />

We can now reference that field on the page and display the values by piping the classTest to a json pipe:

<h6>{{classTest|json}}</h6>

You’ll see this:

2019-11-09 20_06_43-PluralSiteAngularForms.png

These are internal properties Angular uses to manipulate and track the form field. Sweet!

Now, let’s see if we can better look at how the validation classes appear when the user edits. Change the h6 element to:

<h6>{{classTest.className|json}}</h6>

Now you’ll see Angular change the css classes applied to the field as data is entered:

2019-11-09 20_09_59-PluralSiteAngularForms.png

I find these tools useful when visualizing problems in the form.

#Angular and Asp.Net Core 3: #Bootstrap integration plus #Intellisence

When we build a new Angular application in Visual Studio 2019 we use lots of npm commands to get the resources needed. However because the node_modules folder is not included in the solution, Visual Studio will not pick up the bootstrap CSS for intellisence.

2019-11-09 16_25_42-Window.png

There is a simple fix, but let’s first review how to add Bootstrap to an Angular project in Asp.Net Core 3.

Open a terminal window and point to the ClientApp folder then type:

npm install –save bootstrap

In the node_modules folder you’ll see a new folder called bootstrap:

2019-11-09 16_28_11-Window.png

Open the angular.json and add a reference to the minified bootstrap css:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

 

Select the dist folder in the node_modules/bootstrap folder and press ctrl+c to copy it.

Create a new folder called “MyIntellisence”  in the root of the solution then paste in the contents of the dist folder:

2019-11-09 16_29_50-Window.png

That’s it! Now when you open a component, Visual Studio will give you gorgeous intellisence:

2019-11-09 16_31_27-Window.png

#Angular and Asp.Net Core 3: Faster debug cycles in Visual Studio 2019

Asp.Net Core 3 and Angular work great together. Here are a few tricks I use to have a super-fast development cycle when working on the client-side of my code. Note that this doesn’t apply to changes to c# code on your backend hosted in Asp.Net Core 3.

I assume that you have created your Angular 8+ app inside Asp.Net Core 3. If not, create one with the Create a New Project menu and choose the Angular option:

2019-11-08 09_29_03-Microsoft Visual Studio (Administrator).png

2019-11-08 09_29_40-Microsoft Visual Studio (Administrator).png

I like to run the Terminal inside Visual Studio, fewer windows to switch between. Go and install the free Extension Wack Wack.

Run Wack Wack from the View|Other Windows|Terminal menu and change the directory to the ClientApp folder.

2019-11-08 09_32_53-PluralSiteAngular - Microsoft Visual Studio.png

So that you and I are in the same version, update Angular then install all the packages by running these two commands:

ng update @angular/cli @angular/core

then

npm install

Once done we are ready.

Start up your Angular project with this command

npm start

Now, as you make changes to your Angular code and save them, the changes will instantly appear in the browser. No need to press F5 and wait for Visual Studio to connect and build.

2019-11-08 09_37_25-PluralSiteAngular - Microsoft Visual Studio.png