less command

  • Less is a better version of more
  • You can scroll backword and forward using less unline more command

Comamnds :

  • Show Line numbers
    • Use -N command to show line numbers
  • Tailf
    • Use Shift+f command to tail the file and Ctrl+C to end tailf
  • Wordwrap
    • -s wordwrap ON and -S wordwrap OFF
  • direct open a specific line
    • less +7000 -NS logfile.log

Difference between SingleQuote and Double Quote in Angular

  • Single Quote
    • Used to represent a sandalone value
    • Usually used to represent
    • If ‘1 + 1’ is written in html then it wil l printed as 1 + 1 only
  • Double Quote
    • Used to represent dynamic value
    • The text present inside double quotes is considerd as a variable or an expression and angular tries to evaluate it
    • If ” 1 + 1″ is written then it will print it out as 2

Difference between String Interpolation and Property Binding

String Interpolation

  • used for concatenating String
  • can do small math calculation like {{ 1+1 }} inside string interpolation
  • So expression inside {{ brackets }} are evaluated

Property binding

  • For Setting properties using [] brackets

String interpolation and Property Binding

String Interpolation is a special syntax which is converted to property binding by Angular. It’s a convenient alternative to property binding.

When you need to concatenate strings, you must use interpolation instead of property binding.

@Component({  
        selector: 'my-app',  
        template: `<div>  
                        <h1>{{interposlationExample}}</h1>  
                    </div>`  
    })  
    export class AppComponent {  
        interposlationExample: string = 'Interpolation for string only';  
      
    }  

Property Binding is used when you have to set an element property to a non-string data value.

Example:

In the following example, we disable a button by binding to the Boolean property isDisabled.

  import { Component } from '@angular/core';  
    @Component({  
        selector: 'my-app',  
        template: `<div>  
        <button [disabled]='isDisabled'>Disable me</button>  
                         </div>`  
    })  
    export class AppComponent {  
    isDisabled: boolean = true;  
    }

If you use interpolation instead of property binding, the button will always be disabled regardless isDisabled class property value is true or false.

import { Component } from '@angular/core';  
@Component({  
    selector: 'my-app',  
    template: `<div>  
    <button disabled='{{isDisabled}}'>Disable Me</button>  
                     </div>`  
})  
export class AppComponent {  
isDisabled: boolean = true/false;  
}

Reference :

Different Folders and Files in Angular

  1. e2e
    • All the files related to End to End Testing
  2. Node Modules
    • All the node libraries are stored in this folder
  3. src
    • The angular code which is going to be developed is written inside this
  4. .browserslistrc
    • List of browsers on which the application will run.
  5. .editorconfig
    • The Editer configuration on which this code will run
  6. .gitignore
    • Files to be ignored while commiting
  7. angular.json
    • All the Angular configuration is stored inside this file
  8. karma.conf.js
    • Test runner
  9. package-lock.json
    • All the node files downloaded are mentioned inside this file with version
  10. package.json
    • All the node files downloaded are mentioned but with loose versioning
  11. tsconfig.json
    • TypeScript configuration file
  12. tsconfig.app.json
    • TypeScript configuration file but specific to an app
    • Used when there are multiple applications inside a single angular application
  13. tslint.json
    • Lint configuration for ts file. (Maintaining code standard)

Files inside SRC folder

  1. app folder
    • We write all the angular application code inside this folder only
  2. assets folder
    • All the images and static json files are stored in this folder
  3. environments
    • Environment specific files
  4. favicon.ico
    • Icon displayed on the top of the browser
  5. index.html
    • This is the main html file in which components are loaded one by one
  6. main.ts
    • Angular application bootstrapping
  7. polyfill.ts
    • Contains the code to run Angular app in older or those browsers which does not yet support latest standards of web
  8. style.css
    • Global css file of Angular app
  9. test.ts
    • Configure testing framework using this