Component Communication with Input and Output in Angular 2

Component Communication with Input and Output

In Angular 1 we use $broadcast, $emit, $on to communicate between controllers. You can refer my previous blog if you want to know more on this.
We have same similar thing in Angular 2, But the coding is diffrent. Like say to flow data parent to child we will use @Input and @Output to flow data child to parent component. You can update input properties using property bindings [property]. And you can subscribe to output properties using event bindings (event).
You can use it in either "inputs" and "outputs" properties in the @Component decorator or in the Class. It's upto your own taste. We will go through both the way.

input to flow data parent to child

by using input property in @Component decorator

by using @Input decorator

output to flow data child to parent

by using output property in @Component decorator

by using @Output decorator

Download Code

Get the code @ my github

Algorithm to find next 10 Business Day

The factors

How many week days per week? This depends on the company/country policies. In the US, it's generally 5 days per week, whereas in India and in many other countries, many companies work for 6 days a week. Our algorithm needs to take that into consideration.

Basic algorithm

1. Calculate the number of time span in terms of weeks. Call it, W
2. Deduct the first and last week from the number of weeks. W= W-2
3. Take number of working day's as WRK
4. Sum up all the days W+WRK

Lets see it how it work in program

Component in Angular2

Component in Angular2

Angular 1 wasn’t built around the concept of components. Instead, we’d attach controllers to various parts of the page with our custom logic.

In Angular 2, It drops all of this for a much cleaner, more object oriented Component model.

If you are familear with OOP pattern, then you will immediately understand that component is just a class that represents an element on the screen, with member-data that influences the way it looks and behaves.

Now let's go through the Example below and we will try to understand Component and How to do Nesting Component.

Angular2 Event Binding Demo

Download Code

Get the code @ my github

Event Binding in Angular 2

Event Binding Nature

You can hook into just about any DOM-based event using the native event name like (click), (mouseup) and so on. And, you can even use this approach to bind to any DOM-based event that another directive might emit on the DOM tree.

Angular2 Event Binding Demo

Download Code

Get the code @ my github

Closing Stock

I haven't queried SQL since year. Today i got a call from my friend. he was struggling in querying Stock Adjustment thing's. and it's like feels good that even after a gap of one year i am good at sql and able to write sql with the same efficiency. :)

This is what i did to help him

Create Table

  CREATE TABLE [dbo].[MIS_COAL_DTLS](
   [ID] [int] IDENTITY(1,1) NOT NULL,
   [COAL_UNIT1] [decimal](14, 3) NULL,
   [COAL_UNIT2] [decimal](14, 3) NULL,
   [COAL_RCPT] [decimal](14, 3) NULL,
   [CLOSING_STOCK] [decimal](14, 3) NULL,
   [ENT_DATE] [date] NULL,
   [FIN_YEAR] [varchar](50) NULL,
   [CAL_YEAR] [int] NULL
  ) 

Table data

Cursor for getting Closing Stock

  DECLARE @ID int
  DECLARE @COAL_UNIT1 varchar(50)
  declare @COAL_UNIT2 varchar(50)
  declare @COAL_RCPT [decimal](14, 3)
  declare @CLOSING_STOCK  [decimal](14, 3)
  declare @ent_date date
  DECLARE @newclosingstock [decimal](14, 3)
  declare @openingstock [decimal](14, 3)

  DECLARE cur_emp CURSOR
  STATIC FOR 
  SELECT ID,COAL_UNIT1,COAL_UNIT2, COAL_RCPT, CLOSING_STOCK,ent_date from MIS_COAL_DTLS
  OPEN cur_emp
  IF @@CURSOR_ROWS > 0
   BEGIN 
   FETCH NEXT FROM cur_emp INTO @Id, @COAL_UNIT1, @COAL_UNIT2, @COAL_RCPT, @CLOSING_STOCK,@ent_date
   WHILE @@Fetch_status = 0
   BEGIN
   select @openingstock = closing_stock from MIS_COAL_DTLS where ent_date >= dateadd(day,datediff(day,1,@ent_date),0)
    and ent_date < dateadd(day,datediff(day,0,@ent_date),0)
   set @newclosingstock = (@openingstock + @COAL_RCPT) - (cast(@COAL_UNIT1 as decimal(14,3)) + cast(@COAL_UNIT2 as decimal(14,3)));
   if @newclosingstock is not null
       update  MIS_COAL_DTLS set CLOSING_STOCK = isnull(@newclosingstock,0) where id = @ID;
      --print @newclosingstock
   FETCH NEXT FROM cur_emp INTO @Id, @COAL_UNIT1, @COAL_UNIT2, @COAL_RCPT, @CLOSING_STOCK,@ent_date
   END
  END
  CLOSE cur_emp
  DEALLOCATE cur_emp