Angular 14

-

You should know 3rd party dependency for angular. 


Bootstrap

Toaster

Awesome-Fonts (Images )

Sweetalert2


1.    npmjs.com 

You can go to website and search anything for library you get the result with npm command. 


Example : bootstrap 

               font-awesome


for toaster or animation

                npm install ngx-toastr

               npm install @angular/animations


need to import BrowseAnimationModules from@platfomr/broser/animation in module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }





{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "registrationapp": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/registrationapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "registrationapp:build:production"
            },
            "development": {
              "browserTarget": "registrationapp:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "registrationapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}





import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'registrationapp';
  constructor(private _toast:ToastrService){

  }
  ngOnInit(): void {
    this._toast.success("success", "data saved");
  }
}


Comments

Post a Comment

Popular posts from this blog

Filter In Javafx

-
package com.ibadmin.control.tablefilter; import java.util.Optional; import java.util.function.BiPredicate; import java.util.stream.Collectors; import javafx.beans.property.BooleanProperty; import javafx.beans.property.SimpleBooleanProperty; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.collections.transformation.FilteredList; import javafx.collections.transformation.SortedList; import javafx.scene.control.CheckBox; import javafx.scene.control.TableColumn; import javafx.scene.control.TableView; /**  * Applies a filtering control to a provided {@link TableView} instance. The filter will be applied immediately on construction, and can be  * made visible by right-clicking the desired column to filter on. <br>  * <br>  * <b>Features</b><br>  * -Convenient filter control holds a checklist of distinct items to include/exclude, much like an Excel filter.<br> ...
Read more

Kotlin with StandAlone Complier

-
                     What is standalone compiler :  standalone compiler is a complier that provide  supportive files to compile and    execute your program for only one language. ex : Jdk able to compile and execute only java code not php ,dotnet People who dont like to work or practice on Ides like Netbeans and Eclipse for those "StandAlone" compiler is the best option. Click on following link to download Standalone kotlin compiler  : https://github.com/JetBrains/kotlin/releases/tag/v1.1.51 after downloading compiler unzip it , you get multiple folders in it. 1. Develop your kotlin file 2. compile it 3. execute it Develop Open Notepad (Windows )  / Text Editor (Linux)  / Edie Text ( MAC) : type following program and save with any name with dot "kt" extension   Example test.kt fun main(args:Array<String>){ ...
Read more