Software Dev Notes & Tips

--- --- Angular Nested Routes In case something like this is needed Main (has the main router-outlet Settings (has its own router-outlet) Sites Users Other… Create the app with routing support ng new angular-nested-routes --routing-true Add a module for administration with its own routing support ng g module admin --routing=true Add AdminModule to the imports declaration of app.module @ NgModule ( { declarations : [ AppComponent ] , imports : [ BrowserModule , AppRoutingModule , AdminModule ] , providers : [ ] , bootstrap : [ AppComponent ] } ) export class AppModule { } Set path structure in admin-routing.module.ts const routes : Routes = [ { path : 'settings' , component : SettingsComponent , children : [ { path : 'sites' , component : SitesComponent } , { path : 'users' , component : UsersComponent } ] }

--- --- WPF - Combobox with a null item It adds an item for “Select All” or “Empty” functionality into a combobox Converter public class ComboBoxEmptyItemConverter : IValueConverter { /// <summary> /// this object is the empty item in the combobox. A dynamic object that /// returns null for all property request. /// </summary> private class EmptyItem : DynamicObject { public string Name { get ; set ; } = "Empty" ; public override bool TryGetMember ( GetMemberBinder binder , out object result ) { // just set the result to null and return true result = null ; return true ; } } public object Convert ( object value , Type targetType , object parameter , CultureInfo culture ) { // assume that the value at least inherits from IEnumerable

--- --- WPF: Show the publish version in the app MainWindow.xaml <TextBlock Name="version_lbl"/> Add a reference to System.Deployment.dll MainWindow.xaml.cs using System . Deployment . Application ; . . . public MainWindow ( ) { InitializeComponent ( ) ; if ( ApplicationDeployment . IsNetworkDeployed ) { var _version = ApplicationDeployment . CurrentDeployment . CurrentVersion ; string v = $ "{_version.Major}.{_version.Minor}.{_version.Build}.{_version.Revision}" ; version_lbl . Text = v ; } } Publish and install the app

How to install Font-Awesome in Angular Angular CLI: How to add Font-Awesome Works in: Angular CLI: 10.1.1 Node: 10.15.3 Angular: 10.1.1 Font-Awesome 5 Steps Install Font-Awesome into your app npm install --save @fortawesome/fontawesome-free Open app.module.ts and import the module import '@fortawesome/fontawesome-free/js/all.js' ; Add some icons < i class = " fas fa-user-shield " > </ i > Rebuild and run the app Done References Install Font Awesome 5 with NPM

--- --- How to: Angular + ASPNET WebAPI + Windows Authentication + CORS + JWT Scenario We need an intranet web app that allows the user to login automatically with windows authentication, but also it is required to be able to logout from the app and login manually with a different username and password. Client and Server are in different locations (domains) For this we need: ASPNet WebAPI service with Windows Auth Anonynous Auth JWT support CORS support Basic Angular app Environment Visual Studio 2015 .NetFramework 4.8 Angular CLI 10.1.3 Node 10.15.3 Windows 10 Requirements Read https://jwt.io/introduction/ Read https://stackoverflow.com/a/40284152/3596441 Steps AspNet WebAPI Service Create the WebAPI with windows authentication enabled Enable CORS Configure it, so it returns JSON instead of XML Enable Anonymous Authentication Install JWT support install-package System.IdentityModel.Tokens.Jwt Create a folder named JWT and inside add

--- --- Add Cordova and Electron to an Angular App Run your angular app as a web, Windows, Android or Linux app, and and if you have the means, in an Iphone or a Mac. Here I’m just covering the browser, Windows and Android. You can find this code in Github . Works in Windows 10 Node js 12.13 Angular CLI 10.1.1 Cordova 10 Android Studio Create the Angular App Create an Angular app by running this command in the terminal ng new angular-app Run in the browser Run ng serve Open http://localhost:4200 in your favorite browser Install Electron in the Angular App To install electron in angular-app run npm install --save-dev electron Inside angular-app create a file and name it main.js Copy the code the from the first app tutorial in the Electron web site and paste it in main.js const { app , BrowserWindow } = require ( 'electron' ) function createWindow ( ) { // Create the browser window. const win = new BrowserWindow ( { width :