Identifying the first and the last element of a list

 

Just like the even and odd functionality, there are also two other variables that can be used to identify the first and the last elements of the list: <tr *ngFor="let hero of heroes; let first = first; let last = last"     [ngClass]="{ first: first, last: last }">     <td>{{hero.name}}</td> </tr> <table>     <thead>         <th>Name</th>     </thead>     <tbody>       <tr class='first'>            <td>Superman</td>        </tr>        ...       <tr class='last'>            <td>Flash</td>        </tr>        </tbody> </table>

Add Condition to the table in angular

 Add condtion to tr  in  ANgular

<h1>Method 1: With [ngClass]</h1>

<table border="1">

  <thead>

    <td>Reading Time</td>

    <td>PH</td>

  </thead>

  <tbody>

    <tr *ngFor='let element of ph'

      [ngClass]="{'color': (element.ph > 20 && element.ph < 50)}">

      <td>{{element.timestamp}}</td>

      <td>{{element.ph}}</td>

    </tr>

  </tbody>

</table>

<br>

<hr>

<h1>Method 2: With [class.color]</h1>

<table border="1">

  <thead>

    <td>Reading Time</td>

    <td>PH</td>

  </thead>

  <tbody>

    <tr *ngFor='let element of ph'

      [class.color]='element.ph > 20 && element.ph < 50'>

      <td>{{element.timestamp}}</td>

      <td>{{element.ph}}</td>

    </tr>

  </tbody>

</table>

bootstrp popup

 <p>

  Popovers can contain any arbitrary HTML, Angular 

bindings and even directives!

  Simply enclose desired content or title in a

 <code>&lt;ng-template&gt;</code> element.

</p>

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>

<ng-template #popTitle>Fancy <b>content!!</b></ng-template>

<button type="button" class="btn btn-outline-secondary" 

[ngbPopover]="popContent" [popoverTitle]="popTitle">

  I've got markup and bindings in my popover!

</button>

buttons

<p *ngFor="let alert of alerts">

  <ngb-alert [type]="alert.type" (closed)="close(alert)">

{{ alert.message }}</ngb-alert>

</p>

<p>

  <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>

</p>interface Alert {

  type: string;

  message: string;

}

const ALERTS: Alert[] = [{

    type: 'success',

    message: 'This is an success alert',

  }, {

    type: 'info',

    message: 'This is an info alert',

  }, {

    type: 'warning',

    message: 'This is a warning alert',

  }, {

    type: 'danger',

    message: 'This is a danger alert',

  }, {

    type: 'primary',

    message: 'This is a primary alert',

  }, {

    type: 'secondary',

    message: 'This is a secondary alert',

  }, {

    type: 'light',

    message: 'This is a light alert',

  }, {

    type: 'dark',

    message: 'This is a dark alert',

  }

];

@Component({

  selector: 'app-heroes',

  templateUrl: './heroes.component.html',

  styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit{

  name = 'World';

  alerts: Alert[];

  constructor() {

    this.reset();

  }

  ngOnInit(): void {

    throw new Error('Method not implemented.');

  }

  close(alert: Alert) {

    this.alerts.splice(this.alerts.indexOf(alert), 1);

  }

  reset() {

    this.alerts = Array.from(ALERTS);

  }

}

ngbootstrp

Two-way binding

 

Html: <div>

<label for='name'>Hero name: </label> <input id='name' [(ngModel)]="hero.name" placeholder="name"> </div>

Angular project from basics

Create a new project

1.create a folder in local and navigate to the folder

2.Run the CLI command ng new and provide the name angular-tour-of-heroes, as shown here:

ng new angular-tour-of-heroes

3.say yes to the routeing.

4.navigate to the project you have created 

5. open in vscode for this use command code .

Create a component

ng generate component heroes

inside component write this code

export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' }; constructor() { } ngOnInit() { } }

Show the hero object in html

<h3>{{hero.name}} Details</h3> <div><span>id: </span>{{hero.id}}</div> <div><span>name: </span>{{hero.name}}</div>

<h2>{{hero.name | uppercase}} Details</h2>

uppercase is a pipe operator ( | ),

Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.

Alert Using Toaster In MVC

 Add Success ALert Using sweet alert in Asp.net MVc

  TempData["message"] = "Job Name Created  Successfully";

 public ActionResult Index()

{ ViewBag.success = TempData["message"]; return View(); }

index.cshtml

[AcceptVerbs("Get", "Post")] [AllowAnonymous] public async Task <IActionResult> IsJobNameInUse(string JobName) { ScheduleDapper group = ScheduleDapper.CheckDuplicateJobName(JobName); if (group == null) { return Json(true); } else { return Json($"JobName {JobName} is already in use."); } }

 

Today I have get an Issue in .net mvc core regarding datatabl ajax call path .when it deploy on server its virtual path giving an issue to resolve it i have used this instead of path

"url": "@Url.Action("AjaxMethod", "Home")",

use this instead of "home/ajaxmethod".

 Date formate for mvc edit method in mvc

 [DataType(DataType.Date)]

        [DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]

        public DateTime ScheduleDate { get; set; }