Forem: venkateshpensalwar

Create MultiProject Angular Application🔥

venkateshpensalwar — Sat, 10 Feb 2024 09:46:49 +0000

In this post, we will learn how to create and organize multiple Angular applications in one project or workspace. This is useful for enterprises that use a single repository and global configuration for all Angular projects.

Prerequisites

You need to have Angular CLI installed. You can check the version by running ng --version in your terminal. If you don’t have it, you can install it by running npm install -g @angular/cli.

Steps

Create a workspace with the following option. This will create a workspace with all the workspace-wide configuration files, but no root-level application.

ng new MultiProjectApp --create-application=false
cd MultiProjectApp

Use the following command to add as many applications as you want.

ng generate application Project1
ng generate application Project2

To run an application, use ng serve with the application name or the --project flag.

ng serve Project1
# or
ng serve --project="Project1"

To build a production application, use ng build ProjectName with the --configuration=production flag. The build output will be stored in the dist folder with the application name.

ng build Project1 --configuration=production
ng build Project2 --configuration=production

Folder Structure

The folder structure of the workspace is as follows:

Benefits

There are several benefits of having multiple Angular applications in one project:

You do not have to run the time-consuming npm install for every application.
The node_modules folder is shared with all the other applications, saving disk space and time.
All the applications can be updated to the next version easily with a single command.
You can use a single source-control repository (such as git) for all the applications.
You can create and use libraries that contain shared components, services, directives, pipes, etc. across the applications.

Conclusion

In this post, I have shown you how to create and organize multiple Angular applications in one project or workspace. This is a useful technique for enterprises that use a single repository and global configuration for all Angular projects. It also supports library development and code reuse. I hope you found this post helpful and learned something new. If you have any questions, comments, or suggestions, please feel free to share them below. Thank you for reading!

Add BULMA in Angular

venkateshpensalwar — Sat, 03 Feb 2024 13:30:00 +0000

Bulma is an open-source framework that offers a collection of pre-built front-end components. These components can be seamlessly combined to create responsive web interfaces. Best of all, Bulma is free to use! and boasts over 1.1M monthly downloads.😊

Visit BULMA's official website https://bulma.io/
On this website, you will see the npm command to install this CSS framework

npm install bulma

After installing this package go into your angular.json file and add these lines to this object.

"styles": [
            "src/styles.scss",
            "node_modules/bulma/css/bulma.min.css"
          ],

Run your angular application.

ng serve

Open the app.component.html file remove all default HTML and change the HTML with the following

<div class="container m-2">
    <div class="buttons">
        <button class="button is-primary">Primary</button>
        <button class="button is-link">Link</button>
    </div>

    <div class="buttons">
        <button class="button is-info">Info</button>
        <button class="button is-success">Success</button>
        <button class="button is-warning">Warning</button>
        <button class="button is-danger">Danger</button>
    </div>
    <div class="notification is-success">
        <button class="delete"></button>
        Primar lorem ipsum dolor sit amet, consectetur
        adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.
        Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
    <div class="notification is-info">
        <button class="delete"></button>
        Primar lorem ipsum dolor sit amet, consectetur
        adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.
        Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
    </div>
</div>

Let's check our browser.

In this way, we integrated BULMA CSS into our Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!

Add TailwindCSS in Angular

venkateshpensalwar — Sat, 03 Feb 2024 06:02:03 +0000

Hi, All today I am going to show you how we can add a CSS framework in angular, and this time I am using TailwindCSS for this post I am considering you have created an angular project already and want to integrate CSS framework.

Visit TailwindCSS's official website https://tailwindcss.com/docs/guides/angular
On this website, you will see two npm commands we have to run the following command.

npm install -D tailwindcss postcss autoprefixer

Now we have to run the following command it will create one configuration file for TailwindCSS and the file name is tailwind.config.js.

npx tailwindcss init

Then add this configuration to the file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

After this head to the global style sheet style.scss or style.css and add these lines to the file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now After this last step run your project using.

ng serve

Open the app.component.html file remove all default HTML and change the HTML with the following.

<div class="container m-5 flex gap-2">
<button type="button" class="bg-blue-600 text-white px-4 py-2 rounded">Blue</button>
<button type="button" class="bg-red-600 text-white px-4 py-2 rounded">Red</button>
<button type="button" class="bg-green-600 text-white px-4 py-2 rounded">green</button>
<button type="button" class="bg-cyan-600 text-white px-4 py-2 rounded">cyan</button>
<button type="button" class="bg-purple-600 text-white px-4 py-2 rounded">purple</button>
</div>

Now check your browser.

In this way, we integrated TailwindCSS into your Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!

Add Bootstrap in Angular

venkateshpensalwar — Tue, 30 Jan 2024 07:02:45 +0000

Hi, All today I am going to show you how we can add CSS framework in angular and I am using Bootstrap for this Post.

Visit Bootstrap's official website https://getbootstrap.com/

You will see the npm command to install the package ```

npm i bootstrap@5.3.2

* After installing this package go into your angular.json file and add this lines into this object. 

![Angular json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ep2cwyhtlx0bvd2p9tk.png)

"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]


* run your application using

ng serve

* Open the app.component.html file remove all default HTML and change the HTML with the following

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

Now check your browser 
![Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dltyywh7w5podfqcvs5h.png)

In this way, we integrated Bootstrap into your Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!

How To Use Google Fonts in web app🚀

venkateshpensalwar — Sat, 27 Jan 2024 09:46:53 +0000

As a new web developer, you want to use a different font sometimes so give a chance to Google Fonts it is a very big library for various fonts and I will show you how you can use it on your website.

You can you this Google font in 2 ways:

include it in HTML.
include it in CSS.

HTML:

Go to website https://fonts.google.com/
select any font you want and click on Get Font.

Then click on Get embed code.
then copy the code for HTML and add your head tag in your HTML.

CSS:

After clicking on get embed code.
Then click on the import radio button copy the code and add it to your CSS file.

After this, you can now use this new font in your styles in the following way

Use Tag inside typeScript File

venkateshpensalwar — Wed, 17 Jan 2024 19:59:10 +0000

In an HTML document, the document.createElement() is a method used to create the HTML element.

Sometimes we get into situations where we want to use "a" Tag in HTML but we implemented their button previously and now we want to have "a" tag-like behavior in such cases "href" attribute will not be able to be used directly in the button html so in such cases within we can do 2 things

change the "button" tag to "a" tag and use.
use some kind of programmatic way to achieve the same behavior.

So 1st way of doing everyone knows we will get on 2nd way
we have the document.createElement() method provided by HTML and the same method we can have in typescript as nowadays most of the frameworks use typescript.

I have the following code which will show you how we can achieve this

<button (click)="downloadResume()"> Download Resume</button>

downloadResume() {
  getResumeDownload()
}

async getResumeDownload() {
    try {
      const resumeURL = await getDownloadURL(
        ref(this.fireStorage, 'venkatesh_Resume.pdf')
      );
      if (resumeURL) {
        const a = document.createElement('a');
        a.href = resumeURL;
        a.click();
      }
    } catch (error) {
      this.snackbar.open('resumne Faild to Download', undefined, {
        duration: 2000,
      });
    }
  }

here you can see I wrote one code to get the resume link from the Firebase storege and download it in a single go so on clicking the button I made a call and after receiving the resume URL I created an element and attached the download URL on "a" tag and clicked on it so it will download that file otherwise we will have to attach this URL to hidden tag and need to trigger someway.

So In this way, a simple trick will save your time, if you like this small tip then thank you and if you have any questions please let me know.