Nova angular aplikacija bude bez node modules u Angular 17, da bi kreirali
aplikaciju sa node-modules koristimo:
ng new --no-standalone
development@tntsoft.ba
fzp8kcbUmSb9QFp
wifi: TnTs0fT12E4
- Template ui for angular: https://www.infragistics.com/products/ignite-ui-
angular/angular/components/themes/index
-READING DATA FROM JSON FILE PROBLEM WITH ASSIGNING VALUES
books: IBook[] = [];
this.books = JSON.parse(JSON.stringify(booksData));
ANGULAR TESTING
https://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-
karma.html#testing-filters
ANgular testing specific folder:
ng test --include src/app/path-to-component/path-component.component.spec.ts
Angular include code coverage in testing:
ng test --code-coverage
Deploying application:
ng build --prod
promjena boje pozadine u ovisnosti o vrijedosti
-<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' :
'red' }"></<div>
condition ? value-if-true : value-if-false
As result:
{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
-koristenje klase ako se ispuni uvjet:
[ngClass]="{'changeBackground': answer.id === this.answers[step-1]}"
https://www.angularjswiki.com/angular/how-to-add-a-class-based-on-condition-in-
angular/#:~:text=To%20add%20a%20conditional%20class,or%20false%20as%20shown
%20below.&text=And%20in%20the%20above%20code,when%20the%20condition%20is%20true.
https://yagisanatode.com/2021/07/03/get-a-unique-list-of-objects-in-an-array-of-
object-in-javascript/
INNER Html:
https://www.cloudhadoop.com/angular-html-binding/
Addin css to inner HTML
https://stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-
angular
DOCKER:
Clean old images:
Maybe your machine is using the old images. With the following commands you can
delete the old images
docker image rm wekigo_bfrontend
docker image rm wekigo_backend
[Monday 15:10] Victor Bicego
If not works, try with --force
docker-compose up
Scroll to top of page:
window.scrollTo(0,0);
NG bootstrap install:
npm config set legacy-peer-deps true
npm i @ng-bootstrap/ng-bootstrap
https://stackoverflow.com/questions/66014183/error-when-installing-ng-add-ng-
bootstrap-ng-bootstrap
ADD BOOTSTRAP 5 TO project
https://www.itsolutionstuff.com/post/how-to-install-bootstrap-5-in-angular-
13example.html
Testing aplikacije lokalno:
pokrenuti server : ng serve --host 0.0.0.0 zamjenimo sa lokalnom ip
i u enviroment.ts zamjenuti apiurl
SESSION ID CHANGING SOLUTIONS->interceptor adding
https://thesoftwayfarecoder.com/intercepting-http-requests-to-include-user-
credentials-in-angular/
https://medium.com/javarevisited/what-are-http-interceptors-and-how-to-use-them-in-
angular-59fcb4efc235
URL unsafe DOM sanitizer:
https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-
url
PRIMENG DATE RANGE START AND END DATE FROM CALENDAR:
https://stackblitz.com/edit/primeng-template-rqr42n?file=app%2Fapp.component.ts
DATE FNS ZA DATUME I OSTALO
https://date-fns.org/
Redoslijed u klasi treba da bude:
@Input
@Output
public variables
private variables
constructor
lifecycle methods (ngOnInit, ngOnChanges...)
public methods
private methods
ANGULAR FORMS:
1. dodati importe u app.module.ts ili u lokalni modul.ts
imports: [SharedModule, FormsModule,ReactiveFormsModule],
2. uvesti u constructor formbuilder
constructor(private fb: FormBuilder) {}
3. deklarisati novu formu u klasi:
verbundForm: FormGroup = this.fb.group({
projectCode: new FormControl(''),
verbundId: new FormControl(''),
verbundNumber: new FormControl(''),
});
4. kreirati get metode za svaki:
get verbundId(){
return this.verbundForm.get('projectCode');
}
get verbundNumber(){
return this.verbundForm.get('verbundNumber');
}
get projectCode(){
return this.verbundForm.get('projectCode');
}
5. u html dodati kod:
<form >
<input type="text" class="input-text-1" formControlName="projectCode"/> <br>
<input type="text" class="input-text-1" formControlName="verbundId"/> <br>
<input type="text" class="input-text-1" formControlName="verbundNumber"/> <br>
</form>
APPP IS NOT KNOW ELEMENT:
https://stackoverflow.com/questions/44429996/angular-2-component-is-not-a-known-
element
DROPDOWN TAKE INPUT VALUE EXAMPLE:
<select class="select-style" #selectOption formControlName="verbundId" (change) =
"changeOption(selectOption.value)">
<option *ngFor="let option of optionsId">
{{option}}
</option>
ANGULAR NAMING CONVENZION
https://github.com/angular/angular/blob/main/docs/NAMING.md
SUBMIT FROM INPUT TEXT CALL FUNCTION INSIDE INPUT TYPE TEXT
<input class="positioning__input" type="text" #pageInput
(keydown.enter)="setCurentPage(pageInput.value)"/>
UPDATE ANGULAR CLI AND ANGULAR MATERIAL
ng update @angular/cli @angular/core --allow-dirty --force
https://stackoverflow.com/questions/74616687/error-ts2707-generic-type-
%C9%B5%C9%B5directivedeclaration-requires-between-6-and-8-type
https://stackoverflow.com/questions/47572613/how-to-update-angular-material
update globally by cmd cli:
https://www.c-sharpcorner.com/article/update-angular-for-environment-and-project/
INICIJALIZACIJA PRAZNOG ARRAYA
this.selectedLicenseForCSv = new Array(this.totalLicenses).fill('');
RESET FORME PROBLEM JER JE RESETUJE NA NULL; RESET NA DEFAULT VALUE.
https://stackoverflow.com/questions/56971840/reset-form-with-default-values
*ngFor="let translation of translations; let i = index; let last = last"
[class.row-border]="last"
Instalacija Angular material sa nx-om:
First you install Angular material using npm
npm install @angular/material --save
Then you run the following command:
npx nx g @angular/material:ng-add --project=your-project-name
Pokretanje projekta sa nx-om:
npx nx run health-force:serve
Generisanje biblioteke:
npx nx g @nx/angular:library authentication
--directory=libs/shared/authentication --standalone
npx nx generate @nrwl/angular:service authentication --project=libs
NX MONOREPO CHEATSHEET:
- Kreiranje monorepo workspacea: npx create-nx-workspace@latest
Where would you like to create your wokrspace: --unesemo naziv workspacea
Application name: -unesemo naziv aplikacije
- Hostanje aplikacije lokalno: npx nx serve krypto-space
-Instalacija ESlinta u nx monorepo:
nx add @nx/eslint
npx nx lint naziv-aplikacije
- Instalacija eslinta, prettiera i husky:
npm install husky lint-staged eslint-plugin-prettier eslint-config-prettier
--save-dev
npm install --save-dev --save-exact prettier
- HUSKY INSTALL VERSION 9 and above
najbolje installirati verziju 8:
1- I have uninstall the version V9 with npm uninstall husky
2- suppressed the .husky folder
3- I've launched the commands below in this order
npm i husky@8 -D
npm install husky --save-dev
npm pkg set scripts.prepare="husky install"
npx husky install
echo 'node_modules' >> .gitignore
cat .git/config (to check that the hooksPath=.husky)
npx husky add .husky/pre-commit "echo ‘Test pre-commit hook’"
npx husky add .husky/commit-msg "echo ‘Test commit-msg hook’"
git add .
git commit -m'Update Husky V8'
I onda preko ovog tutorijala ostalo uraditi:
https://www.thisdot.co/blog/linting-formatting-and-type-checking-commits-in-an-nx-
monorepo-with-husky
- u .hasky, pre-commit dodati kod za linting: npx lint-staged --concurrent false --
relative
-tutorijal za instalaciju: https://medium.com/@bazobehram/elevating-code-quality-
in-angular-harnessing-husky-lint-staged-and-prettier-for-nested-folder-6a7092ea35d6
Najbolje je prvo instalirati stariju verziju husky
Ako javlja eslint gresku za: eslint-plugin-prettier , onda ga instalirati sa :
npm i -D eslint-plugin-prettier@latest
-instalacija Angular Material: npm i @angular/material
Zatim pokrenutikomandu: npx nx g @angular/material:ng-add --project krypto-space
- Generisanje enviroment.ts u nx workspaceu: koristimo nx generator i upisemo
enviroment
- Deployment aplikacije na Firebase:
1. instaliramo firebase alate sa komandom: npm install -g firebase-tools
2. Bildanje Angular applikacije: npm run build
ng build --configuration=production --localize=false
3. Login na nas gmail account: firebase login
firebase login:add to add new account
firebase login --reauth ; if you need to change account
firebase login:list
firebase login:use
4. Inicijalizacija aplikacije: firebase init
5. firebase deploy
6. Otvorimo firebase.json i promijenimo public: iz "dist/angular-firebase-
crud" u "dist/angular-firebase-crud/browser"
ako ne radi: prvo bildamo app, zatim firebase login, onda firebase init, onda
obrisemo dist folder i ponovo uradimo bild: ng build --configuration=production --
localize=false , nakon toga firebase deploy
- Instalacija svgto icon FANTASTICON: npm i fantasticon
- ako imamo problem sa konvertiranjem icon, mijesanje boja:
https://iconly.io/tools/svg-convert-stroke-to-fill ili povecati ikone pa pokusati
stroke
dodati u angular.json:
"assets": [
{
"glob": "**/*",
"input": "public"
},
{
"glob": "**/*",
"input": "src/assets/fonts",
"output": "/assets/fonts"
}
],
i18n prijevodi:
1. pokrenemo skriptu iz package.json: "extract-i18n": "ng extract-i18n",
2. premjestimo messages.xlf u foldera locale:
3. pokrenemo skriptu iz package.sjon: "xliff-merge": "xliff-simple-merge -i
src/locale/messages.xlf -d src/locale/messages.es.xlf",
