Tips Advance Toolbar

advance toolbar simple beautiful toolbar , you can ues easily from this toolbar and enjoy it . this toolbar has simple configs :

1. startConfigs : this config includes your start buttons (if your project is rtl this startConfigs come right side of your toolbar )
2. endConfigs : endConfigs show in end of your toolbar (if your project is rtl this endConfigs come left side of your toolbar )
3. toolbarEvent : is the most important thing in your toolbar . this config handle your toolbar buttons events like click and etc .

  id: any;
  show: boolean | (() => boolean);
  disable?: boolean | (() => boolean);
  icon?: string | (() => string);
  disableIcon?: string; // icon show when your button is disable
  title?: string | (() => string);
  btnType?:
    'icon-button' // default
    | 'stroked-button'
    | 'label'
    | 'menu';
  hideTooltip?: boolean;
  styles?: any;
  submenuItems?: Observable<SubmenuConfig[]>;
  hasDividerAfter?: boolean;

this is interface of your buttons . you have to set array of buttons for your startConfigs and endConfigs

1. id : you understood which one of your toolbar buttons clicked with this id ,
2. show : you can show or hide your button with this property . this property can be method whenever has boolean output or can boolean by default .
3. disable : you can disable or enable your button with this property . this property can be method whenever has boolean output or can be boolean by default .
4. title : title of your button and show in front of button icon . this property can be method .
5. btnType : type of button show in toolbar .
6. hideTooltip: get boolean value and show or hide buttons tooltip .
7. styles : you can set style for your toolbar buttons in styles . this property get list of css styles . you have to set style for a button like : [{ 'style' : 'value' , 'style2' : 'value2' }]
8. hasDividerAfter : you can set dividers between your buttons with this property .
9. submenuItems:when your button type is menu you set your menu items in this property .