ng-bootstrap Basic Usage example - ng-bootstrap

I have installed ng-bootstrap in my project.
in app.module.ts I imported
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
I also added the declaration
imports:[ NgbModule.forRoot(),BrowserModule, FormsModule, HttpModule, routing]
Might be a stupid question but what do I do now to get the bootstrap benefits?
Thanks

Related

ReScript React how to import CSS files?

I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:
import 'bootstrap/dist/css/bootstrap.min.css';
However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:
#module("bootstrap/dist/css/bootstrap.min.css")
But it doesn't work. How can I import CSS files in ReScript React?

Use a %%raw expression to import CSS files within your ReScript / React component code:
// in a CommonJS setup
%%raw("require('./styles/main.css')")
// or with ES6
%%raw("import './styles/main.css'")
Reference - https://rescript-lang.org/docs/react/latest/styling

In what order should imports be done in React?

I know I have to import React first in component files:
import React from 'react';
// other imports...
I've also heard that imports with styles and images should be imported last:
// other imports...
import * as Styles from './styles.css';
import exampleIcon from '../icons/example-icon.svg';
Why should I import icons, images and styles last? What about the order of other imports (components, utilities, constants, etc.) - is there a standard/documentation for imports order?

I don't have any standard doc for that, but there's easy way which makes you not to care about that anymore..
If you use Visual Code for developing, just install vsc-organize-imports extension for Visual Code.. It will help you to organize imports automatically by default options..
Good luck..

I think We don't have any standard for that, my standard is like this, and I have seen a lot of people import code in this order.
React and React Hooks
packages
components
styles

css parsing failing at production

I was building react app using webpack integration. In webpack.common.js file,
in entry path, i gave vendor.js and app.js and
this is my vendor file
import 'react'
import 'react-dom'
// third party libraries
import 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootswatch/dist/sketchy/bootstrap.min.css'
when building for production, it gets failing and error is
JisonParserError: Parse error on line 1: 255px 25px 225px...------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "LENGTH" at C:\reactjs\react-events-portal\vendors~vendor.css:13:90472
If i remove css bootswatch then, build is working fine. bootswatch path is correct but i dont know how it is working in dev mode not in prod build.
Please help

Look at this https://github.com/facebook/create-react-app/issues/6004 It seems to be bootswatch bug.

It's a problem with Sketchy theme in Botswatch.
They are working in it. https://github.com/thomaspark/bootswatch/issues/878 .
Waiting for new a version.
BTW if you change theme it works.

Vuetify webpack alias css

I'm using the vuetify webpack boilerplate (https://github.com/vuetifyjs/webpack) and I can't get the aliases in /build/webpack.base.conf.js to work for importing css (like import "~assets/css/mycss.css") even though it's working like a charm for js import (like import MyComponent from "components/MyComponent").
I tried several potential solutions I found, none seem to work...
Is this even possible?

Try to remove .css at the end.
Change
import "~assets/css/mycss.css"
to
import "~assets/css/mycss"
For more details, check this: https://github.com/webpack-contrib/sass-loader#imports

How to run hybrid app AngularJS/Material1 with Angular/Material2

i currently have an AngularJS + angular materialv1 app, and we're migrating it to Angular + angular materialv2.
We're running it in hybrid mode for now. All is working well except for the CSS styles.
Styles from material 1 and 2 are conflicting.
I read that i need to use the "compatibility mode" : https://github.com/angular/material2/pull/2790
But I couldn't find out how to set it. Would anyone know how to turn it on ?
Thanks for your help on this.

I found the solution here: i need to import the NoConflictStyleCompatibilityMode class along with MaterialModule
import { MaterialModule, NoConflictStyleCompatibilityMode } from '#angular/material';
...
#NgModule({
imports: [
MaterialModule,
NoConflictStyleCompatibilityMode
],...
If that can help someone...

Resources