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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Getting error str.replace is not a function

Thread ID:

Created:

Updated:

Platform:

Replies:

142826 Feb 21,2019 06:44 AM UTC Jan 21,2020 10:52 AM UTC Angular - EJ 2 4
loading
Tags: Splitter
AMIT KUMAR JHA
Asked On February 21, 2019 06:44 AM UTC

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-panes>
<e-pane size='40%'>
<ng-template #content>
<div>ssssqq</div>
</ng-template>
</e-pane>
<e-pane size='60%'>
<ng-template #content>
<div>ssssq</div>
</ng-template>
</e-pane>
</e-panes>
</ejs-splitter>
</div>


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)

AMIT KUMAR JHA
Replied On 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.

Christopher Issac Sunder K [Syncfusion]
Replied On 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. 

Thanks, 
Christo 


Alain dEspaignet
Replied On 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.

Indrajith Srinivasan [Syncfusion]
Replied On 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:
https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/#update-syncfusion-npm-package 
Indrajith 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon