Different implementation

[maysammansoury]

Hi my dear friend. Tanks for your awesome module. Your module is perfect but implementation according to your instruction doesn't work, so i recommend update your help with my implementation.

<a class="btn form-control"
           [(ngModel)]="myIcon"
           [ipPlaceHolder]="'SearchIcon' | translate"
           [iconPicker]="icon"
           [ipIconPack]="'fa'"
           [ipPosition]="'bottom'"
           [ipFallbackIcon]="myIcon"
           (iconPickerSelect)="onIconPickerSelect($event)"  >
     <i [ngClass]="myIcon"></i>
</a>

[renaudaste]

Hello ! Glad to hear you like our work. Icon picker was first intended to be used on an <input> tag, I don't know yet about adding it to a <a>. I'm going to try your implementation right now, and will update the README then. I'll keep you updated. Thank you for your feedback :+1:

[renaudaste]

Hello again :smiley:

Just published a new version 0.0.5-1. In this version, the iconPickerSelect output is fired on start.

Then I did a test with a new angular-cli project (v1.2.0) using command : ng new myproject --style less

I managed to make it work following this procedure :

• Update package.json with :

  "bootstrap": "3.3.7",
  "font-awesome": "4.7.0",
  "ngx-icon-picker": "0.0.5-1",

• yarn install (or npm install).

• Update style.less with :

  @import '~bootstrap/less/bootstrap.less';
  @import '~font-awesome/less/font-awesome.less';

• Import IconPickerModule :

  
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';

import { AppComponent } from './app.component'; import { CommonModule } from '@angular/common'; import { IconPickerModule } from 'ngx-icon-picker/dist/index';

@NgModule({ declarations: [ AppComponent ], imports: [ CommonModule, BrowserModule, IconPickerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

* Update the template `app.component.html` : 
```html
<a class="btn form-control"
   [ngStyle]="{backgroundColor: '#f96f6f', width: '50px'}"
   [ipPlaceHolder]="'my placeholder here'"
   [iconPicker]="icon"
   [ipIconPack]="'fa'"
   [ipPosition]="'bottom'"
   [ipFallbackIcon]="fallbackIcon"
   (iconPickerSelect)="onIconPickerSelect($event)"  >
  <i [ngClass]="icon"></i>
</a>

• Update the component app.component.ts :

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

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { fallbackIcon = 'fa fa-book'; icon: string;

onIconPickerSelect($event: any): void { console.log('$event : ', $event); this.icon = $event; } }

With this code the icon picker seems to work well.
Does it seems OK for you ?

Regards

[maysammansoury]

Hi dear Renaud Thanks for your quick reply, yes it works perfectly well