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 👍

[renaudaste]

Hello again 😃

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 :

<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