Angular question and solutions

Question: what is package.json file in angular?

sol- Package.json file is the file containing required dependencies/installed dependencies for our angular project. It stores the packages info with respective version’s that are needed to run our Angular application and all those packages get’s installed in node_modules folder in angular.

In order to understand it more, lets explain it this way, for suppose we download/clone a repository from git hub containing an angular project, then our next step is to run ‘NPM install’ command which then installs all the required dependencies as mentioned in package.json file, and all the dependencies required, gets installed and stored in newly created node_modules folder.

Question: What is component in Angular?

sol- Component basically contains view/html file(for displaying content structure on browser), css file(for adding style to html content), spec.ts file (for testing purpose only ) and ts(typescript) file that contains logic for the view/html file.

Once we run command to generate component by angular cli i.e “ng generate component component-name” this creates a four files inside a folder named ‘component-name’ , the generated four files are as shown below:

  • component-name.component.html
  • component-name.component.css
  • component-name.component.spec.ts
  • component name.component.ts

The above is the convention of naming, angular component and angular cli follows the same.

The html files shows the view on the browser. The css file adds the style to the html content shown on the browser. The spec.ts file is for testing purpose. The ts file contains class where we write all the logic which controls the view on the browser.

Question: Can we write html and css in component.ts file of angular?

sol – Yes, we can write html and css in the ts file, lets check it out how to do this: In TS(typescript) file, inside @component decorator function, you would notice templateUrl and styleUrls property, change templateUrl to template and styleUrls to styles then we can write, html and css content inside a back ticks for multiple code of lines of of html and css as well. Below is the demo, showing inline html and css in tS file: @Component({ selector: ‘app-component-ex’, template: `

hii, this is from the inline html contetnt written in ts file of component

`, styles: [` div{ color:red } .wefont{ font-size:30px; } `] }) In above example in ‘template’ property, we directly wrote html tags and content and also in styles array we wrote the rquired css for our view.

Question: What is the difference between property and attribute in Angular?

sol- Attribute value once initialised then cannot be changed, however we can changed its property value with the help of property binding as propery is handled by dom(Document object model) and can be changed with the help of properety bnding.

Question: What is class binding in angular?

Class binding is binding of class to the html element in Angular. The below is the syntax how we bind class to the Html element:
In above syntax we are binding class to the h1 element of html, the syntax specifies class with dot operator followed by classname and then we can assign any property with Boolean value, so that we can dynamically change the property, as per condition or you can also assign hardcoded value like true/false.

Question: What is multiple class binding?