Angular with JQuery and Semantic

Question

here is the structure of my project (I have added to stackblitz to make sure that there is no mistake by typing in eclipse):

I would like to use Angular together with Semantic and jQuery and it does not work. The idea was to flip the segment after pressing the button. I have tried a many combinations and can't do this on my own after many hours.. Thank you in advice for your help!

Code from file of app.headerComponent.ts:

import { Component } from '@angular/core';  
@Component({
  selector: 'header',
  templateUrl: './header.html',
})
export class headerComponent  { }
$(document).ready(function(){
          $('#flip').click(function() {
      $('.ui.black.inverted.segment').transition('horizontal flip');
    });
     });

Code from file of header.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <div class="ui black inverted segment">
      <div class="ui inverted header">
  <h2>Some text
      </h2>
</div>
<div class="ui hugh primary button" id="flip">Start!</div>

Index.html:

<!DOCTYPE html>
<html>
  <head>
        <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></scrip>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

this might help you link

Alexis
– Alexis

2019-08-02 07:22:44 +00:00
Commented Aug 2, 2019 at 7:22 — Alexis
– Alexis, Commented Aug 2, 2019 at 7:22

Sathish Battula · Accepted Answer · 2019-08-02 07:35:32Z

0

See two things you have to change

1.change cdn links to index.html

2.declare $ varible in component.ts

import { Component } from '@angular/core';
import {OnInit} from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

answered Aug 2, 2019 at 7:35

Sathish Battula

671 silver badge7 bronze badges

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

5 Comments

leccepen Over a year ago

So I have tried on this way and nothing has changed. It has probably something to do with the project structure- I have added the picture of them. But thank you @Sathish

Sathish Battula Over a year ago

can you check in google chrome network if bootstrap and semantic is loading??@leccepen

leccepen Over a year ago

I have changed to Firefox and here is the error which I get: Error in /~/src/app/header/app.headerComponent.ts (24:41) $(...).transition is not a function

Sathish Battula Over a year ago

$('#flip').click(function()) you don't have any issue with this one?? surprising I used your code and tested no issues at all

leccepen Over a year ago

I have already tried in the other computer and stil doesn't work. Here you can check it: stackblitz.com/edit/angular-sgtftf

Collectives™ on Stack Overflow

Angular with JQuery and Semantic

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related