Showing posts with label angular. Show all posts
Showing posts with label angular. Show all posts

Saturday, June 3, 2023

How to use material tailwind in angular applicaiton?

 To use the Tailwind CSS framework in an Angular application, you'll need to follow these steps:


Step 1: Create a new Angular project (if you haven't already) by running the following command in your terminal:


ng new my-angular-app



Step 2: Install the necessary dependencies by navigating to your project directory and running the following command:


cd my-angular-app

npm install tailwindcss postcss autoprefixer



Step 3: Set up Tailwind CSS by creating a configuration file. Run the following command to generate the default configuration file:


npx tailwindcss init


This will create a `tailwind.config.js` file in your project root.


Step 4: Configure PostCSS to process Tailwind CSS by creating a `postcss.config.js` file in your project root and adding the following content:


module.exports = {

  plugins: [

    require('tailwindcss'),

    require('autoprefixer'),

  ],

};



Step 5: Open the `angular.json` file in your project root and locate the `"styles"` array. Add the following two lines to include Tailwind CSS and its dependencies:


"styles": [

  "./node_modules/tailwindcss/dist/base.css",

  "./node_modules/tailwindcss/dist/components.css",

  "./node_modules/tailwindcss/dist/utilities.css",

  "src/styles.css"

],


Step 6: Create a new file called `styles.css` in your `src` folder and import Tailwind CSS in it:


@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';



Step 7: Now you can start using Tailwind CSS classes in your Angular templates. For example, in your `app.component.html` file, you can add the following code:


<div class="bg-blue-500 p-4">

  <h1 class="text-white">Hello, Tailwind CSS!</h1>

</div>


That's it! You have successfully integrated Tailwind CSS into your Angular application. You can now use any Tailwind CSS class in your templates and stylesheets. Remember to rebuild your application (`ng serve` or `ng build`) for the changes to take effect.

Saturday, November 28, 2020

How to assign property value while initializing class in typescript

 While creating new object you want to set the value of few fields of class , then you can use following feature of typescript to do that : 


class Person {
    public name: string = "default"
    public address: string = "default"
    public age: number = 0;

    public constructor(init?:Partial<Person>) {
        Object.assign(this, init);
    }
}

let persons = [
    new Person(),
    new Person({}),
    new Person({name:"John"}),
    new Person({address:"Earth"}),    
    new Person({age:20, address:"Earth", name:"John"}),
];


ASP.NET Core

 Certainly! Here are 10 advanced .NET Core interview questions covering various topics: 1. **ASP.NET Core Middleware Pipeline**: Explain the...