Jquery UI layout is not working in typescript

Question

I'm using Jquery UI layout in typescript i have installed jquery, jquery-ui and jquery.ui.layout and this my following code

app.component.html

<div id="test">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import * as $ from 'jquery';
import 'jquery-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor() {
   // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

    $(document).ready(function () {
      (<any>$('body')).layout({ applyDefaultStyles: true });
    });
  }   
}

but am getting following error in browser console

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).layout is not a function
    at HTMLDocument.<anonymous> (app.component.ts:20)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Please help to sort out

Thanks in advance!

Possible duplicate of Angular4 can't find Jquery-UI functions — scipper
– scipper, Commented Aug 29, 2018 at 14:01
What is this layout? I have looked at JQueryUI and there is not layout. I know of the plugin jquery ui layout from here layout.jquery-dev.net is that what you are using? But then where are you importing the type definitions for that plugin? — Gurnard
– Gurnard, Commented Jun 9, 2020 at 7:05

Shazvan Hanif · Accepted Answer · 2019-07-17 14:12:44Z

0

When i add a proper jq then this code is working file like below

import { Component } from '@angular/core';    
import * as a$ from 'jquery';
    declare var $: JQueryStatic;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
      constructor() {
       // let topElem: HTMLElement = <HTMLElement> document.querySelector("body");

        $(document).ready(function () {
          (<any>$('body')).layout({ applyDefaultStyles: true });
        });
      }   
    }

answered Jul 17, 2019 at 14:12

Shazvan Hanif

3713 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery UI layout is not working in typescript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related