Developer Snippet Diary

convert html code to angular

Here is sample html code that will be converted to angular

<script src="assets/js/choices.js"></script>

<div class="input-field second-wrap">
	<div class="input-select">
  		<select data-trigger="" name="choices-single-defaul">
	    	<option>Coupons</option>
	    	<option>Deals</option>
	  </select>
	</div>
</div> 

<script>
	const choices = new Choices('[data-trigger]',
  	{
		searchEnabled: false
  	});
</script>

To angular
To convert the given code to Angular, you need to create an Angular component and modify the HTML template and component class accordingly. Here's an example of how you can convert the code:

1.Install choices.js library

npm install choices.js --save

2.Modify the choices.component.html template:

<div class="input-field second-wrap">
    <div class="input-select">
      <select #selectElem>
        <option *ngFor="let option of options">{{ option }}</option>
      </select>
    </div>
</div>

3. Modify the choices.component.ts component class:

import { Component,ElementRef,ViewChild,ViewEncapsulation } from '@angular/core';
import Choices from 'choices.js';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  @ViewChild('selectElem')
  selectElem!: ElementRef;
  options = ['Coupons', 'Deals'];
  choices: any;

  ngAfterViewInit(): void {
    console.log(this.selectElem);
    this.choices = new Choices(this.selectElem.nativeElement, {
      searchEnabled: false
    });
  }
}

4.Use the ChoicesComponent in your desired Angular component or module by adding it to the appropriate template or module.

Posted by: R GONDAL
Email: rizikmw@gmail.com