Guide to Integrating BLK Theme into an Angular CLI Project

I've recently set up an Angular project using CLI and I am interested in integrating the BLK theme by Creative Tim into this project. However, the only available option from Creative Tim is to download a pre-existing project and build upon that framework.

Unfortunately, I prefer not to take that route. Is there a way for me to incorporate this theme directly into my CLI project without having to start from scratch?

I attempted to install it using npm i blk-design-system-angular but that approach was unsuccessful.

angulartypescriptbootstrap-4

Answer №1

When I attempted to run the command npm i blk-design-system-angular and then executed ng-serve, I encountered an issue within the _images.scss file. https://i.sstatic.net/v220M.png

After inserting the missing { in the _images.scss file, everything functioned smoothly. To test this, I copied a sample code snippet from their website and pasted it into the app.component.html. You can check it out here: https://i.sstatic.net/1mi6X.png

And remember to include the necessary references in the styles: section of your angular.json following their Quick Start guide available here.

   "node_modules/blk-design-system-angular/src/assets/css/nucleo-icons.css",
   "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
   "node_modules/blk-design-system-angular/src/assets/scss/blk-design-system.scss",
   "node_modules/blk-design-system-angular/src/assets/demo/demo.css"

Although the entire project is downloaded into the `node/modules` directory after running `npm install`, you are still able to utilize the class on a blank page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update my SPFx web component to link to a CSS file instead of embedding the CSS styles directly within the component

I recently developed a web part that is reminiscent of a similar one found on GitHub @ https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting. This particular web part enables the embedding of custom CSS code directly in ...

reactjstypescriptsharepoint-onlinespfx

Issues with the ngModel data binding functionality

I'm currently working on the Tour of Heroes project and facing an issue with ngModel. It seems like hero.name is not being updated, or maybe it's just not reflecting in the view. Despite typing into the input field, the displayed name remains as ...

angulartypescript

Leverage generic types and allow acceptance of objects with arbitrary keys

Is it possible to allow the Use function argument type to accept any unknown key, as well as correctly type the keys from SomeGeneric? function Example (opt: { valid?: boolean }) { } type SomeGeneric = Parameters<typeof Example>[0] function Use(op ...

typescript

Customizing the layout of a Bootstrap carousel by adding HR lines both above and

I have set up a bootstrap carousel to showcase numerous images, with the carousel indicators serving as image icons. I am looking to add horizontal lines above and below these icons. How can I achieve this? Currently, the icons functioning as carousel ind ...

htmlcsstwitter-bootstrapbootstrap-4

Implement conditional props for a React component by linking them to existing props

In my current project, I am working on a component that has a loading state. The component has an isLoading prop which determines whether the component is currently in a loading state or not: interface CustomImageComponentProps { isLoading: boolean ...

reactjstypescriptreact-tsx

Trying to access Clockify API through a browser results in an authentication error

I am still getting acquainted with integrating the Clockify API. My goal is to retrieve all the workspaces. I have been using the '' API and including 'X-Api-Key' in the header. Interestingly, when I make this request through Postman, I ...

angularclockify

Guide to obtaining ngPrime autocomplete text when the button is clicked within Angular 6

I am currently utilizing the ngPrime autocomplete feature to retrieve data from a service. My goal is to capture the text entered in the autocomplete field whenever a button is clicked. I attempted to access the value using getElementById.value within th ...

javascriptangularautocomplete

The requested resource could not be located at @angular/platform-browser.js

I am attempting to set up ASP.NET MVC 5 (not Core) + Angular 2.0.0 + JSPM + SystemJS + TS Loader. Upon running the application, I encounter the following error: Failed to load resource: the server responded with a status of 404 (Not Found) http://localho ...

angulartypescriptasp.net-mvc-5systemjsjspm

Exploring ways to fetch an HTTP response using a TypeScript POST request

I have been looking at various questions, but unfortunately, none of them have provided the help I need. The typescript method I am currently working with is as follows: transferAmount(transfer: Transfer): Observable<number> { return this.http .po ...

angulartypescripthttppost

What are the benefits of using material-ui@next without the need for

Thinking about creating a project using material-ui@next, but trying to avoid using withStyles. However, encountering issues with the draft of TypeScript that includes the decorator @withStyles. This leads to one question - is it possible to use material ...

reactjstypescriptmaterial-ui

Angular 2+ interactive popup with timer and automatic redirection

When making a request on mongodb, I need to display a modal window with an hourglass while the request is loading. The modal window should disappear once the request is finished, and if possible, redirect to another route. Technologies Used: Angular 2+, N ...

node.jsangularmongodbmodal-dialog

Tips for handling datetime in angular

Currently, I am working with Angular (v5) and facing an issue related to Datetime manipulation. I am trying to retrieve the current time and store it in a variable. After that, I need to subtract a specified number of hours (either 8 hours or just 1 hour) ...

javascriptangulardatetimemomentjs

Is it possible to exclusively utilize Bootstrap 4 (excluding react-bootstrap) within my React application?

Is it a bad idea to combine jQuery and React? I came across some information suggesting that they may not work well together. Is this true? ...

reactjstwitter-bootstrap-3bootstrap-4

The Angular HTML component is failing to display the locally stored JSON data upon page initialization

import { Store,STORES } from '../models/store'; export class StoreLocatorComponent implements OnInit { public Stores: any = []; constructor() { } ngOnInit(): void { this.Stores = STORES ; this.Stores.forEach(element => { ...

jsonangularconstructorhtml-renderingngoninit

The ins and outs of Angular's type checking mechanisms

I have a few different scenarios on my mind. Imagine if I make an http call to fetch all movies from my php backend api. This is observable, so I need to subscribe to it. // Here's my service getAll() : Observable<Movie[]>{ this.http.get ...

angulartypescriptobservable

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

cssbootstrap-4media-queries

When running jest unit tests, an error is thrown stating that includes() and toLowerCase are not functions

MyComponent.js contains both toLowerCase and includes methods on the props. However, when attempting to perform unit testing on MyComponent, I encounter an issue where the functions toLowerCase() and includes() are not recognized as valid. Within MyCompon ...

reactjstypescriptjestjsenzyme

Guide to Making a Basic TypeScript Metadata Tag in Your Code

I'm looking for a way to format certain fields before sending them to the server-side. My goal is to serialize specific fields of my TypeScript classes using custom serializers. An example of what I'm aiming for is as follows: export class Pers ...

jsonserializationtypescriptangulardecorator

Is it possible to enlarge the panel only by clicking on the text, without affecting the entire header panel?

I need help with my accordion setup. I want to be able to expand or collapse each panel by clicking only on the header text, not the entire header area. Can anyone provide guidance on how to achieve this? For example, when I click on the text for 'He ...

angulartypescriptprimeng

Configuring TypeScript to utilize worker_threads

Currently, I am attempting to implement WebWorkers in my Typescript project and I have encountered a hurdle. Despite having installed @types/node and updating everything, 'worker_threads' has transitioned from an experimental feature to a stable ...

node.jsmultithreadingtypescriptweb-workerworker-thread