Atilla Tanrikulu

I am an experienced software engineer and architect living in Germany. I’m passionate about distributed scalable enterprise web-based microservices/applications and delivering great user experiences. I have created some amazing enterprise-level applications that many people have used and hopefully enjoyed.

Articles

Java Quick Reference Apache Kafka Tutorial Guvenli Kod Gelistirme Making an Enterprise Scale Angular Project Step by Step Nightly SQL Server Database Backup with command line batch file and windows scheduler AOP Framework without proxy pattern IdentityServer Nedir Middleware Pattern With Csharp And Javascript Docker most used commands Online Proje Dokumantasyonu, Docker, Nginx, mdwiki How to use Github Pages for static websites Inheritance with JavaScript, EC6 (ECMAScript 6, ECMAScript 2015) Object oriented javascript and Inheritance Singleton Pattern with Javascript Factory Pattern with Javascript Open terminal here mac os x service IdentityServer4-Angular-6-integration JMater notlari, kurulum ve kullanim Learn Jekyll in 12 Steps Make Mac Application with Automater from sh script Make spotlight index markdown or code files OAuth 2.0 Nedir (RFC6749) Using Custom CSS and Custom JavaScript to an Angular Project Cross Platform Desktop Application With .Net Core 2x and Angular 6x front-end projects with nodejs gulp bower yeoman and angularjs Host Asp.Net Core on Linux with Apache Redis kurulumu ve ayarlari Useful Mac OS Apps Choosing internet connection on multiple interface windows Name Server Kurulumu How to define domain name for your dynamic IP SQL table data compare, and prepare insert satements Useful Git Commands TFS ile Otomatik deployment yapmak Spring Boot Tutorial Sql server icin maliyetli sorgularin tespit edilmesi Arama Motoru Optimizasyonu (SEO) My installed mac apps

Using Custom CSS and Custom JavaScript to an Angular Project

1. Add Custom CSS file to Angular Project

You can import your css file to “src/styles.css” file add following line

// styles.css

@import '~src/assets/custom-styles.css';

or you can add angular.json

// angular.json

"architect": {
    "build": {
      "options": {
      ...
      "styles": [
          "src/assets/custom-styles.css",
          "src/styles.css"
        ],
      ...
      }
    }
}

Then add some style to custom-styles.css

// custom-styles.css

.test-style {
    color: red;
}

Then add your style to your html file

<body>
 <h1 class="test-style">Test</h1>
 // ...
 
</body>

2. Add External JavaScript to Angular Project

// angular.json
{
  //..
  "projects": {
    "Enterprise-Angular-Project": {
      //..
      "architect": {
        "build": {
          //..
            "scripts": [    
              "node_modules/jquery/dist/jquery.slim.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/external.utils.js"
            ]
          },
          //..
          }
      },
      //..
  }
}

Create file external.utils.js and paste below code

// external.utils.js
function testMethod(msg) {
  alert(msg);
}

You can use this javascript methods in html file like below

<body  onload="testMethod('test')">
  <app-root></app-root>
</body>

If you want to use javascript file in angular components, you can import like this.

import * as util from '../../assets/external.utils.js';

Then you must export functions

export function testMethod(msg) {
  alert(msg);
}

After that you can use this in Angular component

import { Component, OnInit, Inject } from '@angular/core';
import * as utils from '../../assets/external.utils.js';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent implements OnInit {
  constructor() {

      utils.testMethod('testMethod');
  }
}

3. Add Custom ES6 (TypeScript) Module to Angular Project

Create file under assets folder custom-module.ts then paste bolow code

// custom-module.ts

export class CustomModule {

    testMethod1(msg) {
      console.log(msg);
    }
  
    testMethod2(msg) { 
      console.log(msg);
    }
  } 

Then import this top of angular component

import { Component, OnInit } from '@angular/core';
import { CustomModule } from '../../assets/custom-module';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent implements OnInit {

  animal: string;
  core: CustomModule = new CustomModule();

  constructor() {
    // use your method like this.
    this.core.testMethod1('testMethod1');
  }
}

4. Add Custom Javascript Module to Angular Project

Create file under assets folder custom-module.js then paste bolow code

// custom-module.js

export class CustomModule {

    testMethod1(msg) {
      console.log(msg);
    }
  
    testMethod2(msg) { 
      console.log(msg);
    }
  } 

Then import this top of angular component

import { Component, OnInit } from '@angular/core';
import { CustomModule } from '../../assets/custom-module.js';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent implements OnInit {

  animal: string;
  core: CustomModule = new CustomModule();

  constructor() {
    // use your method like this.
    this.core.testMethod1('testMethod1');
  }
}
Date: 2018-05-25 10:20:00 +0000