The thing that works for me is that I get a button with the html code. But the button isn't styled so it's a plain button without any css characteristics.
Down is the code that should be relevant to primeNg.
So my problem is that primeNg isn't styling my components.
edit: Once trying to re run the application I get the error: InvalidConfigError... ensure the file is valid JSON Which is the Style section.
index.html
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
.angular-cli.json
"styles":{
"styles.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
}
app.component.html
<button pButton type="button" class="ui-button-warning"></button>
app.component.ts
import {ButtonModule} from 'primeng/primeng';
app.module.ts
import { ButtonModule } from 'primeng/primeng';
imports: [
ButtonModule
]
Related
I'm trying to override the primary color in Bootstrap but it just doesn't work. Btw I'm using NextJS.
This is my "globals.scss" which I have imported in "_app.js".
$primary: black;
#import 'bootstrap/scss/bootstrap';
And I have imported Bootstrap in index.js like this
import 'bootstrap/dist/css/bootstrap.css'
I tried looking it up but everything I tried didn't work.
What I've tried:
Importing functions, variables, and mixins from Bootstrap SCSS.
Rearranging the imports.
Importing bootstrap/scss/bootstrap.scss to "_app.js"
But I've noticed that in the inspector it says my primary color is black but then right above it changes back to the original:
Below:
Above:
How to override Bootstrap variables in a Next.js project
Let's create an app and try to change the $primary color from default to black.
App structure:
Code:
index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href='https://nextjs.org'>Next.js!</a>
</h1>
<button type='button' className='btn btn-primary mt-4'>Primary</button>
</main>
</div>
)
}
_app.js
import '../styles/globals.css'
import { useEffect } from 'react'
function MyApp({ Component, pageProps }) {
useEffect(() => {
require('bootstrap/dist/js/bootstrap.bundle.min.js');
}, []);
return <Component {...pageProps} />
}
export default MyApp
globals.scss
$primary: black;
#import '../node_modules/bootstrap/scss/bootstrap';
Screenshot:
I think the problem of your codes is about the order of importing files. If you use globals.scss file to change bootstrap default values, Then you must import that file after your main bootstrap file. I'm not sure about the project structure you have, but for example if you imported Bootstrap in index.js file, change that file from just this:
import 'bootstrap/dist/css/bootstrap.css'
To something like this:
import 'bootstrap/dist/css/bootstrap.css'
import 'your/path/to/globals.scss'
Maybe that overrides the bootstrap file with your custom file.
I'm embedding a request form. I want to click a button in react to open the form, then add a button to go back/exit. Ive added the HTML tags into index.html but I'm having a hard time with control. I toggle the display: none/block to get it to appear/ disappear which works fine (also have to toggle display for all of the react app so only the form is shown.).
The Html I'm trying to embed has 3 tags. I'm not able to find an answer of how to use dangerouslySetInnerHTML with multiple tags.
I've also just tried to use dangerouslySetInnerHTML twice and just gave the react div the needed reference id. No luck, just a blank white page.
<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link rel="stylesheet" media="screen" href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css" />
<script src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"></script>
12 hours of trying.
(https://codesandbox.io/s/l9qmrwxqzq)
This worked pretty much immediately. Once I found it.
'''
import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from "react-helmet";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Check if Helmet works as expected with script tags</h1>
<p>Check console output - you will see $ is undefined</p>
<Helmet>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
/>
<script>
{`
console.log('Test', typeof $);
`}
</script>
</Helmet>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
'''
My final product
'''
import React from "react";
import { Helmet } from "react-helmet";
export default class Jobber extends React.Component {
render() {
return (
<div className="Application" id="f6f2802e-49e8-477b-b405-8b2b18dded97">
<Helmet>
<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link
rel="stylesheet"
media="screen"
href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css"
/>
<script
src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"
/>
</Helmet>
</div>
);
}
}
'''
I'm trying to make a webpage, with angular, and make a header with component. For making the files i'm using the ng g c commons/header that make the html,scss,ts and .spec.ts files, and modify the app.module.ts file like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './commons/header/header.component';
import { FooterComponent } from './commons/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgbModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
but, when i'm put it in the index.html file, the component html doesen't show up.
<!DOCTYPE html>
<head>
<title>TEST</title>
<meta name="keywords"
content="" />
<meta name="description" content="" />
<meta name="author" content="Szabó Boldizsár">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="styles.scss" rel="stylesheet" type="text/scss">
</head>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>
the generic files(what the console command made) is still the same, i didn't modifyd it.
What can be the wrong? I'm using even bootswatch.
In Angular index.html file have only app-root tag like this:
<body>
<app-root></app-root>
</body>
just put your header & footer in app.component.html file, which is parent component wrapper of all components in your application.
<div class="wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
It isn't how Angular works : you can't just render your components into a .html file.
As a SPA (Single Page Application), your content is rendered into a container (app-root by default).
It advice you to follow the official Angular tutorial to understand how components are rendered into the application.
You have to put the selectors of the header and footer component in the template of the AppComponent instead of putting it in Index.html .
AppComponent is your bootstrap component , as you can see in the #NgModule metadata property .
You can think of the components mentioned in the bootstrap array as the starting point of you angular application . So any other angular components has to be inside those Base components in order to show up.
And also please refer to the official angular tutorial.
Angular 2 - can I use *ngIf in the link/stylesheet tag in in the head section?
I want something like this:
link rel='stylesheet' href="../assets/css/styles1.css" *ngIf="myvar === 'example'"
Thanks
Check this solution here:
https://github.com/angular/angular-cli/issues/4202#issuecomment-339420111
By #TRAHOMOTO
<link rel="stylesheet" href="/theme/css/vendor-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrVendor">
<link rel="stylesheet" href="/theme/css/common-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrCommon">
<link rel="stylesheet" href="/theme/css/application-rtl.min.css" *ngIf="(locale$ | async)?.isRtl else ltrApplication">
<ng-template #ltrVendor>
<link rel="stylesheet" href="/theme/css/vendor.min.css">
</ng-template>
<ng-template #ltrCommon>
<link rel="stylesheet" href="/theme/css/common.min.css">
</ng-template>
<ng-template #ltrApplication>
<link rel="stylesheet" href="/theme/css/application.min.css">
</ng-template>
Try the following solution:
HTML:
<head>
<link id="stylesheet" rel="stylesheet" href="style1.css">
</head>
TS:
import { DOCUMENT } from '#angular/platform-browser';
constructor (#Inject(DOCUMENT) private document) { }
ngOnInit() {
this.document.getElementById('stylesheet').setAttribute('href', 'style2.css');
}
Directives and Angular bindings can only be used in the template of an Angular component.
You can't make the <head>element an Angular application, because making an element an Angular application purges the elements original content.
Angular components can only be added inside an Angular applications root element.
The only option is to use imperative code (like shown in izulito's answer).
I am trying to create a simple component in React where I am trying to use Google's MDL from here https://getmdl.io/started/index.html , so as they state I need to link the CSS from their server , I would like to know where should i do this. I tried it adding it to main index.html and refer to style in component but seems like its not being used.
What should be the proper way to do this ?
I am a novice at React stuff.
Component code
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
New button
</button>
</div>
);
}
}
export default App;
This is index.html
<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
You have to use className instead of class to refer to css classes in React because class is a reserved word in ES6 and with JSX you are writing Javascript and not HTML. For example:
<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
New button
</button>