How to connect application to the Web Services

connect web services

angular div show or hide

 angular div show or hide

Hide and show div

it is checkbox use click method for others

angular active gaurd example

 ng g guard <name>

give u 4 different options from that select one

import { Injectable } from '@angular/core';

import { CanActivate, CanActivateChild, CanDeactivate, CanLoad,  Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree }  from '@angular/router';

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class GuardNameGuard implements CanActivate, CanActivateChild,  CanDeactivate<unknown>, CanLoad {

  canActivate(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot): Observable<boolean | UrlTree>  | Promise<boolean | UrlTree> | boolean | UrlTree {

    return true;

  }

  canActivateChild(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot): Observable<boolean | UrlTree>  | Promise<boolean  | UrlTree> | boolean | UrlTree {

    return true;

  }

  canDeactivate(

    component: unknown,

    currentRoute: ActivatedRouteSnapshot,

    currentState: RouterStateSnapshot,

    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree>  | Promise<boolean | UrlTree> | boolean | UrlTree {

    return true;

  }

  canLoad(

    route: Route,

    segments: UrlSegment[]): Observable<boolean> | Promise<boolean>  | boolean {

    return true;

  }

}

here i selected all so generated details study needed on this

Angular learn links

 

angular LInks 1

angular links2

angular links3  ang link4 ang link5 ang link6

pages styles

 refet this blog below footer styles

code add styles

angular filter tutorial

  This is sample code how to filter list in an angular

filter in angular

below the working sample

filter example

angular hide header if user not login 

import { Router }  from "@angular/router";


constructor(public router: Router){} 

<nav *ngIf="router.url !== '/login' && router.url !== '/signup'"> // or maybe only 'login'
</nav>

convert basic authentication

 String username = "abc";

String password = "123";

String encoded = System.Convert.ToBase64String(System.Text.Encoding.GetEncoding("ISO-8859-1")
.GetBytes(username + ":" + password));
httpWebRequest.Headers.Add("Authorization", "Basic " + encoded);

pfx file

pfx file upload c#

web apis

 

[Route("~/api/Secrets/{name:string}")]

public string GetSecrets(string uri, string name)

{

var  keyVaultName= name;

var kvUris = $"https://{keyVaultName}.vault.azure.net";

}

if you like to pass the string or id from api then donot use name:string youll get parameter error

use only {name}

Learn asp.net core

asp.net core tutorial

asp.net core and angular crud

 here sample example of crud using angular and aps.net 

crud

and here made to cross issue and headers issues using above by creating cs file

sample code

Angular dynamic reactive forms

 

My code: angular dynamic

sample angular dynamic forms Link below

Angular dynamic Example

Angular dynamic form

here i have created dynamic form check this link

Angular dynamic form

for  code see this link

ANgular dynamic forms

Angular bootstrap tabs

 <ul class="nav nav-tabs">

    <li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
    <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>

angular tutorial

 The two-way banana-in-the-box model binding is a special case, but Angular has a few standard ways to bind common things:

• [disabled]="disabledState": Any attribute can be bound with square brackets.
• (click)="buttonClick(album)": Events are bound with parenthesis.
• #form1="ngForm": Element name bindings
• *ngXX: Directives like *ngIf and *ngFor
• {{album.title}}: Inline expression bindings

Angular data bind

 

signIn(provider) {
    this._auth.login(provider).subscribe(
      (data) => {
        console.log(data);
        this.hideForm = false;

        this.emaill = data.email;
        this.nom = data.last_name;
        this.prenom = data.first_name;
        this.profileImage = data.image;
    })
}

 error TS2339: Property 'email' does not exist on type 'Object'.

solution: Replace (data) with (data : any)

Angular model popup bootstrap

 simple way to work model popup 

Just remove style and aira-hideen attributes then it will work fine in angular

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

    style="display: none;" aria-hidden="false">

Protect apis using azure certificate

 This is tutorial of how to protect our apis from certificate generated in  azure keyvault. accessing the certificate using thumbprint 

1.read api with azure certificate and basic authentication

                           [Route("~/api/test")]
public string GetcustomField ()

{

string thumbprint = "CA3655E816A1CBF11F7CFC6A97E28A371366B190";

X509Store store = new X509Store(StoreName.My, StoreLocation.CurrentUser);

store.Open(OpenFlags.ReadOnly);

X509Certificate2Collection certificates = store.Certificates.Find(X509FindType.FindByThumbprint, thumbprint, false);

X509Certificate2 certificate = certificates[0];

System.Net.ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;

HttpWebRequest req = (HttpWebRequest)WebRequest.Create("https://api.entrust.net/enterprise/v2/organizationalUnits");

req.Method = WebRequestMethods.Http.Get;

req.Headers.Add("Authorization", "Basic OTU3Y2NkMThiMi00NjU0OTYyMjomSDdEVStXRDkhQiFPUFNCUkI3SQ==");

req.ClientCertificates.Add(certificate);

var httpResponse = (HttpWebResponse)req.GetResponse();

using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))

{
return streamReader.ReadToEnd();

}

}

Div hide based on dropdown value

  <div class=" col-sm-6">

              <kendo-dropdownlist [defaultItem]="'Select item...'"  [data]="RevocationReasons"[valuePrimitive]="true"[(ngModel)]="selectedValue">

              </kendo-dropdownlist>

          </div>

 <div *ngIf="selectedValue==='Key Compromised' ">

</div>

hide or show div based on the dropdown selected value

Angular Navigation

 <ul class="nav navbar-nav">

  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/']">Home</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/about']">About</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/calendar']">Calendar</a>
  </li>
</ul>

for / active link not working so use exact:true;