We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Getting error str.replace is not a function

I am trying to use splitter in angular 7 project. But as soon I put the #content in ng-template then I get error saying  str.replace is not a function
This is what I did:
1. npm install @syncfusion/ej2-angular-layouts --save
2. In my module I have added the SplitterModule
3. Then using as
<div id='load-content-container'>
<ejs-splitter #horizontal height = '200px' width='1100px'>
<e-pane size='40%'>
<ng-template #content>
<e-pane size='60%'>
<ng-template #content>

below is the error I am getting:

These are the packages I am using :
    "@syncfusion/ej2-angular-charts": "^16.4.48",
    "@syncfusion/ej2-angular-layouts": "^16.4.54",
    "@syncfusion/ej2-angular-navigations": "^16.4.47",
    "@syncfusion/ej2-angular-popups": "^16.4.47",
    "@syncfusion/ej2-base": "^16.4.47",

core.js:15714 ERROR TypeError: str.replace is not a function
    at evalExp (template.js:65)
    at compile (template.js:52)
    at Object.push../node_modules/@syncfusion/ej2-layouts/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:57)
    at compile (template-engine.js:16)
    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.setTemplate (splitter.js:915)
    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.createSplitPane (splitter.js:951)
    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/src/splitter/splitter.js.Splitter.render (splitter.js:215)
    at SplitterComponent.push../node_modules/@syncfusion/ej2-layouts/node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:130)
    at component-base.js:100
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

4 Replies

AK AMIT KUMAR JHA February 21, 2019 11:17 AM UTC

below issue got resolved by downgrading the version.

How can we create nested splitters without writing html code in component.ts(https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/#nested-splitter)
I saw the given example but I dont want to mix my html in typescript file.

CI Christopher Issac Sunder K Syncfusion Team February 24, 2019 09:46 AM UTC

Hi Amit, 

Thanks for contacting Syncfusion support. 

We are glad to hear that the script error has resolved. Our splitter component pane `content` property currently have support for string values, so you can pass outerHTML of the target element by accessing DOM like as below code and place your HTML codes into component html file.  
paneSettings: [  
  { size: '40%', min: '30px', content: document.querySelector('#pane1').outerHTML }  
We have prepared sample for above scenario, check this stackblitz link:  

Please let us know if you require any further assistance. 


AD Alain dEspaignet January 20, 2020 05:34 PM UTC

I got the same error

str.replace is not a function

This splitter is very poor if it does not support content projection.
I tried all the <ng-template> examples. It does not work.
It makes sense that it does not work now since it expects HTML as a string.

A decent splitter should be able to render arbitrary Angular components as content.

IS Indrajith Srinivasan Syncfusion Team January 21, 2020 10:52 AM UTC

Hi Alain,

Greetings from Syncfusion support

We have validated the reported query and unable to reproduce the issue at our end. We suspect the packages are duplicated in your node_modules, can you please run the below command to remove the duplicate packages. We have also prepared a sample in the Angular 7 environment.

Removing Duplicates:

Live Chat Icon For mobile
Up arrow icon