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;