how can i use two ejs-symbolpalette components in one html,they seem to influence each other

[JiaJian chen]

the demo url : https://stackblitz.com/edit/angular-kmpfmr?file=app.component.html

[Aravind Ravi]

Hi JiaJian, 

We have created a sample to show two symbols palettes in single diagram. On analyzing the provided sample, you have used the same palettes in both Symbol palettes. So that palettes in first symbol palette does not gets visible and palettes gets visible only in the second symbol palette. So please use the different palettes for two symbol palette. Please refer to the below code snippet 

<div id="palette-space" style="width:20%;float:left"> 

            <ejs-symbolpalette id="symbolpalette" [expandMode]='expandMode' [palettes]='palettes' width="100%" 

                height="700px" [symbolHeight]=60 [symbolWidth]=60 [symbolMargin]='symbolMargin' 

                [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'> 

            </ejs-symbolpalette> 

        </div> 

        <div id="palette-space1" style="width:20%;float:left"> 

            <ejs-symbolpalette id="symbolpalette1" [expandMode]='expandMode' [palettes]='palettes2' width="100%" 

                height="700px" [symbolHeight]=60 [symbolWidth]=60 [symbolMargin]='symbolMargin' 

                [getSymbolInfo]='getSymbolInfo' [getNodeDefaults]='getSymbolDefaults'> 

            </ejs-symbolpalette> 

        </div> 

  

 

Sample: https://stackblitz.com/edit/angular-kmpfmr-dxf36j 

Regards 

Aravind Ravi